Overlay div - 滚动与内容一样多
我正在这个网站上工作:http://www.massobservation.org。如果您单击“信息”,则会在内容顶部显示一个 div,如果您愿意的话,可以显示一个覆盖层。但是,我希望该网站在叠加层处于活动状态时只能滚动到叠加层 div 的内容。然而,您可以看到,即使覆盖结束(黄色背景结束),网站仍然滚动到底部。
这里给出了一个例子: http://cargocollective.com/montessori
有什么想法吗?非常感谢。
I'm working on this site: http://www.massobservation.org. If you click on 'Information' a div is displayed on top of the content, an overlay if you will. However, I'd like the site, when the overlay is active, to only be scrollable as far as the content of the overlay div. You can see however, that even though the overlay ends (the yellow background ends) the site still scrolls to the bottom.
An example of this is given here: http://cargocollective.com/montessori
Any ideas? Many thanks in advance.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
只要叠加层不是
#top
的子元素,就应该有效:当叠加层打开时,将此样式添加到您的主要内容中:
当叠加层关闭时,删除该样式。
As long as the overlay is not a child element of
#top
, this should work:When the overlay opens, add this style to your main content:
When the overlay closes, remove the style.
你可以尝试的是:
这应该意味着只有覆盖内容会导致浏览器滚动。
What you could try is:
This should mean that only the overlay content causes the browser to scroll.
显示叠加层时,您可以执行以下操作:
a) 关闭主文档的滚动 -
$(document).css('overflow', 'hidden');
b) 将叠加层的高度设置为窗口高度 -
$(overlay).css('height', $(window).height()+'px');
c) 设置overflow: auto 覆盖 -
$(overlay ).css('溢出', 'auto');
这应该确保滚动只工作到覆盖层内容的末尾。
When showing the overlay, you can do something like:
a) Turn off scroll for main document -
$(document).css('overflow', 'hidden');
b) Set height of overlay to window's height -
$(overlay).css('height', $(window).height()+'px');
c) Set overflow: auto for overlay -
$(overlay).css('overflow', 'auto');
That should ensure that scroll works only till the end of content in the overlay.