利用jquery禁止外层滚动条的滚动
前言
通常情况下，当内部滚动条滚动到两端时，再接着滚动时外层的滚动条就会跟着滚动；可是有时我们希望用户只能滚动当前区域，而不触发外层（window）的滚动条，离开当前区域后，才能滚动外层的滚动条。因为用户可能一不小心滚动的幅度过大了，导致当前区域离开可视区域。
在jquery中，滚动事件是scroll，而这个事件是不能阻止冒泡和阻止默认事件的。假如我们设定要禁止window的滚动条，我采取的策略是：当鼠标进入到当前区域后，则window的滚动条的高度始终是鼠标进入前的高度
如下的代码：
<style type="text/css">
.main{
overflow: auto;
width: 400px;
height: 400px;
border: 1px solid #aaa;
}
.main p{
height: 800px;
}
</style>
<body>
<div id="main" class="main">
<p></p>
</div>
<p style="height:1000px;"></p>
</body>
$(function () {
var scrollTop = -1; // 鼠标进入到区域后，则存储当前window滚动条的高度
$('#main').hover(function(){
scrollTop = $(window).scrollTop();
}, function(){
scrollTop = -1;
});
// 鼠标进入到区域后，则强制window滚动条的高度
$(window).scroll(function(){
scrollTop!==-1 && $(this).scrollTop(scrollTop);
})
})
从上面的代码可以看到，我并没有阻止window滚动条的事件，而是用户每次滚动时，都会重新进行赋值。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，当然，或许还有更好的方法，欢迎大家提供，谢谢！
-
本文向大家介绍jquery弹窗时禁止body滚动条滚动的例子，包括了jquery弹窗时禁止body滚动条滚动的例子的使用技巧和注意事项，需要的朋友参考一下 当弹出一个jq提示窗口的时候，一般窗口右边还会有进度条的情况，禁止进度条方法 禁止浏览器滚动条滚动： 关闭弹出的窗口的时候需要显示出来，让浏览器窗口可以继续滚动 还原滚动： 以上这篇jquery弹窗时禁止body滚动条滚动的例子就是小编分享给大
-
问题内容： 是否可以禁用滚轮在输入数字字段中更改数字？我已经弄乱了特定于Webkit的CSS，以删除微调框，但我想完全摆脱这种行为。我喜欢使用它，因为它在iOS上带来了一个不错的键盘。 问题答案： 防止其他对象建议的输入数字元素上的mousewheel事件的默认行为（调用“ blur（）”通常不是首选方法，因为这不是用户想要的）。 但。我会避免一直监听所有input-number元素上的mouse
-
本文向大家介绍jQuery实现浮动层随浏览器滚动条滚动的方法，包括了jQuery实现浮动层随浏览器滚动条滚动的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下： 这是jQuery实现的一个浮动层效果，随浏览器滚动条而滚动，并一直保持在顶部位置，请使用火狐测试，IE下表现不尽理想。 运行效果截图如下： 在线演示
-
问题内容： 我已经设置了一个片段，当单击该片段时会将页面部分滚动到视图中，问题是，如果用户想在动画中间滚动，则滚动会有点断断续续。 如果用户手动滚动，如何停止jquery动画？ 问题答案： 将功能更改为此： 这将： 如果用户手动滚动（仅在动画过程中），则停止动画 不会妨碍您正常的jQuery动画，例如其他一些答案 一些额外的信息： 您为什么要绑定所有这些事件？“滚动鼠标滚轮等…” 有许多不同类型的
-
有没有一种方法可以隐藏滚动条，但仍然保留向上/向下滚动的选项？我尝试溢出：隐藏；它删除滚动条，但我不能滚动。
-
现在的情况是：当内部滚动条滚动到底部时如果继续滚动，外部滚动条不会滚动，需要停顿或者移动鼠标滚动才能触发外层滚动条