zoukankan      html  css  js  c++  java
  • 子元素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');




  • 相关阅读:
    MONGODB全面总结
    MongoDB 进阶-关联查询
    MongoDB之DBref(关联插入,查询,删除) 实例深入
    MongoDB 聚合管道(Aggregation Pipeline)
    Mongodb索引基础
    MongoDB 全文搜索教程
    MongoDB数组修改器更新数据
    MongoDb查询详解
    服务器与客户端回叫
    Gauss列主消元
  • 原文地址:https://www.cnblogs.com/bruce-gou/p/5601017.html
Copyright © 2011-2022 走看看