利用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包裹DOM节点的方法
Jun 11 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
Vuex实现购物车小功能
Aug 17 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php日历[测试通过]
2008/03/27 PHP
php empty函数 使用说明
2009/08/10 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
phpwind放自动注册方法
2006/12/02 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python中列表和元组的区别
2017/12/18 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
企业新年寄语
2014/04/04 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript