利用jquery禁止外层滚动条的滚动


Posted in Javascript onJanuary 05, 2017

前言

通常情况下,当内部滚动条滚动到两端时,再接着滚动时外层的滚动条就会跟着滚动;可是有时我们希望用户只能滚动当前区域,而不触发外层(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滚动条的事件,而是用户每次滚动时,都会重新进行赋值。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,当然,或许还有更好的方法,欢迎大家提供,谢谢!

Javascript 相关文章推荐
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
bootstrap table配置参数例子
Jan 05 #Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 #Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 #Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 #Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 #Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 #Javascript
jQuery选择器实例应用
Jan 05 #Javascript
You might like
php实现ping
2006/10/09 PHP
基于mysql的论坛(4)
2006/10/09 PHP
如何删除多级目录
2006/10/09 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
破解Session cookie的方法
2006/07/28 Javascript
经验几则 推荐
2006/09/05 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
python使用Matplotlib画饼图
2018/09/25 Python
python安装后的目录在哪里
2020/06/21 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
override和overload的区别
2016/03/09 面试题
写求职信有哪些注意事项
2014/05/08 职场文书
单位更名证明
2015/06/18 职场文书
2015国庆节感想
2015/08/04 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
python中使用redis用法详解
2022/12/24 Redis