博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
子元素scroll父元素容器不跟随滚动JS实现
阅读量:5058 次
发布时间:2019-06-12

本文共 2040 字,大约阅读时间需要 6 分钟。

仅供参考:

function parentNotRoll($id){        var flg;//标记滚动方向,true-向下,false-向上        var $test = document.getElementById($id);        var eventType = 'mousewheel';        // 火狐是DOMMouseScroll事件        if (document.mozHidden  !== undefined) {            eventType = 'DOMMouseScroll';        }        myAddEvent($test,eventType,getData);        function getData(event){            var e = event || window.event;                        var scrollHeight = $test.scrollHeight,//元素的全部高度,包括滚动条高度                height = $test.clientHeight,//元素设置的高度                maxHeight = scrollHeight - height,//滚动条可以滚动最大高度                scrollTop = $test.scrollTop;//滚动条的高度            var delta = e.wheelDelta?e.wheelDelta:e.detail;            if(delta < -3 || delta ==3){                flg = true;            }else            if(delta >3 || delta == -3){                flg = false;            }            //判断当滚动向下,并且滚动到边界,就阻止浏览器默认行为,否则就取消阻止默认行为            if(flg && scrollTop >= maxHeight || !flg && scrollTop <= 0){                stopDefault();                            }        }                                //兼容绑定事件方法        function myAddEvent(ele,sEvent,getData){            if(ele.addEventListener && !ele.attachEvent){
//非IE ele.addEventListener(sEvent,getData); }else{
//IE if(document.attachEvent && !document.addEventListener){ //IE8以 ele.attachEvent('on'+sEvent,getData); }else{ //IE8以上 ele.addEventListener(sEvent,getData); } } } //阻止默认浏览器动作 function stopDefault(){ var e = arguments.callee.caller.arguments[0] || window.event; if (e.preventDefault){
//非IE e.preventDefault(); //IE中阻止函数器默认动作的方式 } else{
//IE e.returnValue = false; } return false; } }

 

调用 parentNotRoll();函数,传入你需要实现滚动的元素ID或类即可实现   

parentNotRoll('test');

转载于:https://www.cnblogs.com/bruce-gou/p/5601017.html

你可能感兴趣的文章
BZOJ 5180 [Baltic2016]Cities(斯坦纳树)
查看>>
写博客
查看>>
利用循环播放dataurl的视频来防止锁屏:NoSleep.js
查看>>
python3 生成器与迭代器
查看>>
java编写提升性能的代码
查看>>
ios封装静态库技巧两则
查看>>
Educational Codeforces Round 46 (Rated for Div. 2)
查看>>
Abstract Factory Pattern
查看>>
C# 实现Bresenham算法(vs2010)
查看>>
基于iSCSI的SQL Server 2012群集测试(一)--SQL群集安装
查看>>
list 容器 排序函数.xml
查看>>
存储开头结尾使用begin tran,rollback tran作用?
查看>>
Activity启动过程中获取组件宽高的五种方式
查看>>
java导出Excel表格简单的方法
查看>>
SQLite数据库简介
查看>>
利用堆实现堆排序&amp;优先队列
查看>>
Mono源码学习笔记:Console类(四)
查看>>
Android学习路线(十二)Activity生命周期——启动一个Activity
查看>>
《Genesis-3D开源游戏引擎完整实例教程-跑酷游戏篇03:暂停游戏》
查看>>
CPU,寄存器,一缓二缓.... RAM ROM 外部存储器等简介
查看>>