图像的有限滚动
Posted
技术标签:
【中文标题】图像的有限滚动【英文标题】：Limited scrolling for an Image 【发布时间】：2013-10-20 19:18:14 【问题描述】：我正在开发一个移动网站，一旦网站加载，全屏图像会显示为浮动层。
请看下面......
A：我的移动网站包含大量超出窗口高度的内容
B：页面加载后，全屏图像显示为内容顶部的浮动层。图片超出窗口高度
C：当用户向下滚动时，他可以看到图像的下部，但看不到网站内容。无论用户如何向下滚动，图像的底部都不应与屏幕底部分离
我可以知道如何实现 C 吗？？
另外，在情况 B 中，如果用户使用的是大屏幕智能手机，有时图像可能不会超过屏幕高度，在这种情况下，图像应该固定在屏幕顶部且不可滚动。
如果以上所有都可以通过不使用jquery来实现会更好。不过，如果是必须的话，那还是可以的…………
非常感谢。
【问题讨论】：
手绘示例+1 jQuery 是 javascript。你总是可以使用纯 JavaScript 而不是 jQuery。 【参考方案1】：虽然一般效果只能通过 CSS 实现，但您可能需要 javascript 来打开和关闭效果。
一般的想法是在包含图像的层上使用position: fixed 和overflow: scroll，而body 具有overflow: hidden。在这些情况下，您可以滚动叠加层的内容，但不能滚动正文。
虽然这适用于台式机，但在移动设备上情况会有所不同，尽管body 上的overflow: hidden 会呈现所有内容。一个快速的解决方法是将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 在body 上切换no-scroll 类。当它在那里时，溢出的内容被隐藏，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，它就会打开和关闭效果。
【讨论】：
这个答案太棒了！非常感谢=D 只是一个附加问题：当用户关闭图像层时，是否可以让 body 属性恢复正常（删除溢出：隐藏和位置：固定）？ 是的。正如我在回答中所写，您可能需要使用 javascript。既然你谈到了 jQuery，我将举一个使用它的例子。一分钟后查看我的更新。 普通的javascript有什么方法可以做到这一点？因为我可能因为某些原因无法导入jquery库。 是的，有可能。请在此处查看此主题：***.com/questions/195951/…以上是关于图像的有限滚动的主要内容，如果未能解决你的问题，请参考以下文章