限制滚动图像

Question

限制滚动图像

Kit*_* Ng 6 html javascript css position image

我正在开发一个移动网站,一旦网站加载,全屏图像将显示为浮动图层.

请看下面........ 在此输入图像描述

答:我的移动网站包含大量超出窗口高度的内容

B:页面加载后,全屏图像显示为内容顶部的浮动图层.图像超出窗口高度

C:当用户向下滚动时,他可以看到图像的下半部分,但不能看到网站内容.无论用户如何向下滚动,图像的底部都不应从屏幕底部分离

我可以知道如何实现C ??

此外,在情况B中,如果用户使用具有大屏幕的智能电话,有时图像可能不会超过屏幕高度,在这种情况下,图像应固定在屏幕的顶部而不能滚动.

如果不使用jquery可以实现上述所有目标,那会更好.但是,如果它是必须的,那么它仍然可以........

非常感谢.

Answer 1

Nil*_*son 1

虽然一般效果只能通过 CSS 实现，但您可能需要 javascript 来打开和关闭效果。

总体思路是在包含图像的图层上使用position: fixed和，而具有。在这些条件下，您可以滚动覆盖层的内容，但不能滚动正文。overflow: scrollbodyoverflow: hidden

虽然这在桌面上有效，但在移动设备上情况有点不同，尽管在移动设备上，所有内容都将overflow: hidden呈现body。一个快速的解决方法是也应用position: fixed到。body我不知道这是否是有意为之，但它在 iOS 上的 Safari 和 Chrome 中运行良好。

标记概述：

<body class="no-scroll">
  <section class="content">
    /* content here */
  </section>

  <aside class="overlay">
    <img src="img.jpg">
  </aside>
</body>

Run Code Online (Sandbox Code Playgroud)

CSS：

.no-scroll {
  overflow: hidden;
  position: fixed;
}

.overlay {
  overflow-y: scroll;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
}

.overlay img {
  width: 100%;
  height: auto;
}

.no-scroll .overlay {
  display: block;
}

Run Code Online (Sandbox Code Playgroud)

这样你就可以使用 javascript 来no-scroll切换body. 当它在那里时，溢出的内容被隐藏并且overlay可见。当它不存在时，它overlay就会被隐藏。

这是效果的示例（不过，没有 .no-scroll 类和 javascript，只是为了表明它有效）：

编辑：

在上面的例子中，我给了一个overlay半透明的背景，并给里面的图像设置了max-width100%。如果您希望图像填满整个屏幕，请将更改max-width为常规width.

编辑2：

根据要求，这里有一个用于切换效果的 jQuery 函数。

$(".close").click(function() {
  $("body").toggleClass("no-scroll");
});

Run Code Online (Sandbox Code Playgroud)

只需提供一个<button>或任何类名称close，它就会打开和关闭效果。

归档时间：	12 年前
查看次数：	212 次
最近记录：	12 年前