如何使用 jquery 使 div 不滚动页面答案

【问题标题】：How to make a div not scroll off the page using jquery如何使用 jquery 使 div 不滚动页面
【发布时间】：2011-01-25 11:31:10
【问题描述】：

基本上我的结构是这样的：

<body>
   <div> main content </div>
   <div> toolbar </div>
   <div> results </div>

向下滚动时，我希望“主要内容”从屏幕上消失。 “工具栏”与页面顶部保持齐平，“结果”滚动，在滚动时消失在“工具栏”中。

编辑：工具栏从屏幕中间开始。我希望它滚动到顶部，但没有进一步，但页面的其余部分（下方）继续滚动。

但这略有不同。在上面的示例中，虽然工具栏位于顶部附近，但它会阻止滚动结果。

【问题讨论】：

听起来很简单，style="position: fixed;" 可以解决您的需求。
我也积极地缩减了我最初很长的问题，请参阅编辑。
固定位置确实做了最好看的滚动。你可以做一些 jQuery 来检查 div 是否适合屏幕，否则它不会完全可访问。当您的 div 处于某个最大位置时，您也可以在固定和绝对之间进行一些切换。
style="位置：固定；"首先导致结果与工具栏重叠，其次，当我向下滚动时，工具栏 div 缓慢向下移动非常缓慢.. 我使用的是 Firefox 3.6

【解决方案1】：

我会有位置：固定；为工具栏。这样，它将保持固定在视图中。

<body>
   <div> main content </div>
   <div style="position:fixed;"> toolbar </div>
   <div> results </div>

【讨论】：

display: absolute 不存在...使用position: fixed;，您可以使用 top,left,right,bottom 属性分配位置。
哈哈，哎呀..我在我的头上。谢谢 :o) 我出于某种原因将显示与位置混合在一起。

【解决方案2】：

您使用的是 ASP.NET AJAX 吗？如果是这样，您可以使用“始终可见”控件之类的东西：

如果不是，我相信有一些 jQuery 对其进行了重制，我相信这个可能也可以：

【讨论】：

【解决方案3】：

$(".myDivClass").css("overflow", "hidden");

【讨论】：