Question

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

请看下面........ enter image description here

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

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

C：当用户向下滚动时，他可以看到图像的下半部分，但不能看到网站内容。无论用户如何向下滚动

，图像的底部都不应与屏幕底部分离

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

此外，在情况B中，如果用户使用大屏幕智能手机，有时图像可能不会超过屏幕高度，在这种情况下，图像应固定在屏幕顶部而不能滚动。

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

非常感谢。

Answer 1

虽然仅使用CSS可以实现一般效果，但您可能需要使用javascript来打开和关闭效果。

一般的想法是在包含图片的图层上使用position: fixed和overflow: scroll，而body包含overflow: 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>

<强> 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;
}

使用此功能，您可以使用javascript切换no-scroll上的课程body。当它在那里时，溢出的内容被隐藏，overlay可见。当它不存在时，隐藏overlay。

以下是效果的示例（不使用.no-scroll类和javascript，只是为了表明它有效）：

Full screen
With markup/CSS visible

修改

在上面的示例中，我为overlay提供了一个半透明的背景，并为其内部的图像提供了100％的max-width。如果您希望整个屏幕都填充图片，请将max-width更改为常规width。

编辑2：

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

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

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

限制滚动图像

1 个答案: