Overlay div - 滚动与内容一样多

发布于 2024-12-22 09:02:01 字数 369 浏览 0 评论 0原文

我正在这个网站上工作: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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

稚然 2024-12-29 09:02:01

只要叠加层不是 #top 的子元素,就应该有效:

当叠加层打开时,将此样式添加到您的主要内容中:

#top {
    position: fixed;
}

当叠加层关闭时,删除该样式。

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:

#top {
    position: fixed;
}

When the overlay closes, remove the style.

再浓的妆也掩不了殇 2024-12-29 09:02:01

你可以尝试的是:

  • 当覆盖层可见时,设置overflow:hidden;就主要内容而言。我在 div .work-section 上尝试过这个。
  • 确保覆盖内容不是主要内容的子内容。现在它是 .work-section div 的子级,将其移到外面。

这应该意味着只有覆盖内容会导致浏览器滚动。

What you could try is:

  • When the overlay is visible, set overflow: hidden; on the main content. I tried this on the div .work-section.
  • Ensure the overlay content is NOT a child of the main content. Right now it's a child of the .work-section div, move it outside.

This should mean that only the overlay content causes the browser to scroll.

血之狂魔 2024-12-29 09:02:01

显示叠加层时,您可以执行以下操作:

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文