利用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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
AngularJS转换响应内容
Jan 27 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
原生js实现分页效果
Sep 23 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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中生成标准uuid(guid)的方法
2019/04/28 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
Jquery中删除元素的实现代码
2011/12/29 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
python三引号输出方法
2019/02/27 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
python实现mean-shift聚类算法
2020/06/10 Python
django 模型字段设置默认值代码
2020/07/15 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
房屋改造计划书
2014/01/10 职场文书
承认错误的检讨书
2014/01/30 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
《故乡》教学反思
2014/04/10 职场文书
经营目标管理责任书
2014/07/25 职场文书
毕业生个人总结
2015/02/28 职场文书
如何计划开一家便利店?
2019/07/31 职场文书