利用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 相关文章推荐
理解Javascript_08_函数对象
Oct 15 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
ucenter通信原理分析
2015/01/09 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
尼克松手表官网:Nixon手表
2019/03/17 全球购物
少年闰土教学反思
2014/02/22 职场文书
2014村务公开实施方案
2014/02/25 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
开工典礼致辞
2015/07/29 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
mysql的Buffer Pool存储及原理
2022/04/02 MySQL