利用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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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
1 Tube Radio
2021/03/02 无线电
php5 and xml示例
2006/11/22 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
python函数的万能参数传参详解
2019/07/26 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
详解python 中in 的 用法
2019/12/12 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
我的教育故事演讲稿
2014/05/04 职场文书
申论倡议书范文
2014/05/13 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
Python的这些库,你知道多少?
2021/06/09 Python