仅当窗口缩小时如何启用滚动条？

Posted 2023-05-07

【中文标题】仅当窗口缩小时如何启用滚动条？

【英文标题】：How can I enable scroll-bar only when window is resized smaller?

【发布时间】：2012-10-15 01:44:31

【问题描述】：

单页网站。 顶部带有锚链接的标题 到页面上的不同 div（部分）。

假设我的屏幕分辨率为 1280*800，每个 div 部分最大为 800，并且当我的浏览器为最大尺寸时，每个 div 部分上的内容都是可见的。我忘了提到滚动已禁用，因此其他 div 仅使用顶部的锚链接可见（自动滚动）。所以这就是问题所在，当我调整浏览器的大小时，例如我的浏览器上只有 450px 的高度，我只能在屏幕上看到这么多的内容，并且不能滚动到 div 的底部，所以它到达了底部我的浏览器。

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

本质上，当浏览器窗口小于 800 像素时，div 会在底部被浏览器减少的量所覆盖。我希望将整个 div（而不是其中的内容）向上推（顶部位置），以使 div 的底部（即第 800 个像素）接触浏览器的底部。

有什么办法吗？

【参考方案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（因此它一次只会滚动一页）并将其height 设置为800px。当浏览器窗口调整到小于 800 px 时，会出现 body 的滚动条，让您上下滚动容器 div。容器和内容都将保持相同的大小：800 像素。

html,body 
    overflow: auto;


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

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

【讨论】：

你的答案是我所需要的，基本上如果浏览器的高度小于 800px，那么滚动需要移动 div 的顶部位置，同时滚动到 div 的底部击中浏览器的底部。有什么线索吗？

抱歉，我不明白这与我的示例显示的有何不同。你能解释更多吗？

第一个问题：我真的没有太多编写“纯”javascript 的经验，我一直使用诸如 jQuery 之类的 Web 框架（我认为这没问题，因为你的问题被标记了）。恐怕其他人将不得不回答它。第二个问题：只需根据您的需要调整您的选择器。 $("#myelement") 选择 id，$(".myclass") 选择类等。

我不是在谈论纯javascript，我在问我把它放在哪里，就像它只是<script>your code above</script>还是<script>somethinghere | your code | something here </script

好的，这就是混乱。在 JsFiddle 中，只有当屏幕与 div 重叠时才会发生溢出，这很好。因为里面的内容是隐藏的。我的问题是我有一个容器（div），里面有其他 div。容器高度为 800px，内容不超过此高度。整个目标是将实际 div 的顶部位置推到屏幕上方。

【参考方案2】：

使用媒体查询：

@media screen and (max-height: 450px) 
  body  overflow: auto;  /* Or change the height or whatever */ 

【讨论】：

问题是身体有一个隐藏集的溢出作为标准。基本上我的内容从不超过 800px 高度，所以我需要启用小于 800px 的滚动。

然后将 450px 更改为 800px 或您需要的任何值？

【参考方案3】：

我认为将主包装的最小高度设置为 800 像素的最佳解决方案，否则您必须为您的主要内容添加溢出隐藏。滚动可以通过设置主要内容顶部位置来触发，但必须是绝对的或类似的。你猫写了一个函数，女巫可以帮助你移动主要内容，改变它的顶部位置。