javascript - 如何仅在窗口缩小时启用滚动条？

Question

一页网站。顶部带有 anchor 链接的标题到页面上的不同 div(部分)。

假设我的屏幕分辨率为 1280*800，每个 div 部分最大为 800，当我的浏览器为最大尺寸时，每个 div 部分的内容都可见。我忘了提到滚动被禁用，所以其他 div 只能使用顶部的 anchor 链接可见(自动滚动)。所以问题来了，当我调整浏览器大小时，比如说我的浏览器只有 450px 的高度，我只能在屏幕上看到那么多的内容，无法滚动到 div 的底部，所以它到达了底部我的浏览器。

另一点要理解的是，div 本身的所有元素都没有溢出 div 的高度，所以简单的溢出不起作用，因为问题与浏览器高度的大小有关。

本质上，当浏览器窗口小于 800px 时，div 将被浏览器缩小的部分覆盖在底部。我希望将整个 div(不是它里面的内容)推到它需要的位置(顶部位置)，以便 div 的底部，即第 800 个像素接触浏览器的底部。

有什么解决办法吗？

Answer 1

您可以监听窗口大小的变化并根据它调整 div 的大小。这样，div 将始终具有窗口的大小，因此如果它变得太小，就会显示溢出。

$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
    $("div").css("height", $(window).height());
});​​​​

工作示例 jsFiddle .请记住将 div 的溢出设置为 auto，这样当屏幕太小时它们就会显示。

更新:据我在您的更新中了解到的情况，您的要求可以通过简单的 CSS 来满足。让html,body随意溢出，但是把“容器”div的溢出设为hidden(这样只会滚动一页一次)及其高度为800px。当浏览器窗口调整到小于 800 像素时，主体的滚动条将出现，让您上下滚动容器 div。容器和内容将保持相同的大小:800 像素。

html,body {
    overflow: auto;
}

.container, .contents {
    height: 800px;
    overflow: hidden;
}

工作示例 jsFiddle .那是你需要的吗？如果你真的想向上推容器 div 直到它的底部与窗口对齐，尝试设置 padding-top 或 margin-top 而不是 top(虽然在这种情况下我不知道滚动将如何工作)。