• 子元素scroll父元素容器不跟随滚动JS实现


    仅供参考:

      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');




  • 相关阅读:
    面试系统化学习和准备(一)——今日事必须今日毕
    20220324准备
    面试系统化学习和准备(二)——docker篇
    20220325目标
    任务调度系统
    二叉树最大路径和
    count(*)这么慢,我该怎么办?
    动态规划最长连续递增序列
    设置工作模式与环境(上):建立计算机
    Django 数据库配置(二)
  • 原文地址:https://www.cnblogs.com/bruce-gou/p/5601017.html
Copyright © 2020-2023  润新知