JS实现子元素scroll父元素容器不跟随滚动
2016-03-29 15:04
706 查看
$.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(); } }); }); };
没错,依赖jQuery的一个扩展方法,上面代码只要拷贝到你页面的JS中,然后,你希望哪个元素滚动到底,父级不滚动,直接:
$().scrollUnique();
参考文章:
http://www.zhangxinxu.com/wordpress/?p=5092
相关文章推荐
- ExtJS5 - 实现带周数的日期选择控件
- <%@ INCLUDE FILE=""%>与<JSP:INCLUDE PAGE=""/>区别
- jsp页面中html,javascript.css的执行顺序
- js事件模型
- Iframe 自适应高度(js)
- javaScript基础—imooc
- JS 日期格式化
- js解决movebox移动问题
- Javascript数组、json对象基本操作
- javascript中 .eq()的用法
- logcat 格式化输出json
- 使用js模拟i18n国际化的例子
- javascript中不易分清的slice,splice和split三个函数
- JavaScript正则表达式
- 分析js闭包引起的事件注册问题
- js处理异常try{}catch(e){}
- AJAX 跨域请求 - JSONP获取JSON数据
- JS文件中获取路径
- javaScript数据类型转换
- 原生js 学习之array 数组