子元素scroll父元素容器不跟随滚动JS实现
2016-06-24 13:04
926 查看
原文链接
demo
正确的做法是在mousewheel中去阻止(注意兼容firefox,在firefox中叫”DOMMouseScroll“)
demo
精简版
因为原作者说的比较啰嗦…基本思路
因为子元素的scroll事件冒泡到父级元素,所以要在事件中e.preventDefault()坑
在scroll事件中去阻止冒泡是徒劳的,因为这个时候scroll已经发生了正确的做法是在mousewheel中去阻止(注意兼容firefox,在firefox中叫”DOMMouseScroll“)
代码(jquery版本)
$.fn.scrollUnique = function() { return $(this).each(function() { var eventType = 'mousewheel'; // 火狐是DOMMouseScroll事件 if (document.mozHidden !== undefined) { eventType = 'DOMMouseScroll'; } $(this).on(eventType, function(event) { // 一些数据 var scrollTop = this.scrollTop, scrollHeight = this.scrollHeight, height = this.clientHeight; var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0); if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { // IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位 this.scrollTop = delta > 0? 0: scrollHeight; // 向上滚 || 向下滚 event.preventDefault(); } }); }); };
相关文章推荐
- 使用JsonConfig控制JSON lib序列化
- 解析json
- 用JSON-server模拟REST API(三) 进阶使用
- JSP:input标签获取焦点时文本框内提示信息清空(并且变换文本框背景颜色)
- 用JSON-server模拟REST API(二) 动态数据
- 用JSON-server模拟REST API(一) 安装运行
- js 锚点 不跳转
- Javascript的调试利器:Firebug使用详解
- 从Action中传值到JSP页面的方法
- 如何做分类导航栏菜单js
- API例子:用Java/JavaScript下载内容提取器
- js对象引用传递
- JSON格式化
- 返回值是JSON的阿贾克斯方法
- js中window.open()的所有参数详细解析
- Javascript 严格模式详解
- javascript常见知识点整理1
- json
- 浅谈json取值(对象和数组)
- JavaScript 笔记