子元素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');