子元素scroll，滚动结束后不影响父元素滚动

<style> p{line-height:40px;} .overflow{ overflow:auto; height:70px; } </style> <div id="container"> <div id="overflow" class="overflow"><div style="height:50px;background-color:red"></div><div style="height:50px;background-color:green"></div></div> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> <p>333333</p> </div> <script> window.onload=function(){ var eventType="mousewheel"; if(document.mozHidden){ eventType="DOMMouseScroll"; } document.getElementById('overflow').addEventListener(eventType,function(e){ var event=window.e||e; var delta=event.wheelDelta?event.wheelDelta:-(event.detail); var scrollTop=this.scrollTop; var screenHeight=this.clientHeight; var scrollHeight=this.scrollHeight; console.log(scrollHeight); if(delta>0&&scrollTop<=0||delta<0&&scrollTop>=scrollHeight-screenHeight){ this.scrollTop = delta > 0? 0: scrollHeight; if(event.preventDefault) event.preventDefault(); else{ event.returnValue=false } } },false) } </script> 运行

js

window.onload=function(){
    var eventType="mousewheel";
    if(document.mozHidden){
        eventType="DOMMouseScroll";
    }
    document.getElementById('overflow').addEventListener(eventType,function(e){
        var event=window.e||e;
        var delta=event.wheelDelta?event.wheelDelta:-(event.detail);
        var scrollTop=this.scrollTop;
        var screenHeight=this.clientHeight;
        var scrollHeight=this.scrollHeight;
        console.log(scrollHeight);
        if(delta>0&&scrollTop<=0||delta<0&&scrollTop>=scrollHeight-screenHeight){
            this.scrollTop = delta > 0? 0: scrollHeight;
            if(event.preventDefault)
                event.preventDefault();
            else{
                event.returnValue=false
            }
        }
    },false)
}

html

    

    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333
    
333333