子元素滚动不影响父元素

Javascript

		
		
		$.fn.scrollUnique = function() { 
		    return $(this).each(function() { 
		        var eventType = 'mousewheel'; 
		        // 火狐是DOMMouseScroll事件 
		        if (document.mozHidden !== undefined) { 
		            eventType = 'DOMMouseScroll'; 
		        } 
		        $(this).on(eventType, function(event) { 
		            // 一些数据 
		            var scrollTop = this.scrollTop, 
		                scrollHeight = this.scrollHeight, 
		                height = this.clientHeight; 
		  
		            var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);         
		  
		            if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { 
		                // IE浏览器下滚动会跨越边界直接影响父级滚动，因此，临界时候手动边界滚动定位 
		                this.scrollTop = delta > 0? 0: scrollHeight; 
		                // 向上滚 || 向下滚 
		                event.preventDefault(); 
		            }         
		        }); 
		    });  
		}; 

		$(".inner").scrollUnique();

 

HTML

<div class="outer">
    <div class="inner">
        <div class="inner1"></div>
    </div>
</div>

 

CSS

.outer {
		height: 2000px;
		border: 1px solid red;
	}
	.inner {
		border: 1px solid red;
		width: 300px;
		height: 300px;
		overflow-y: auto;
	}
	.inner1 {
		border: 1px solid blue;
		width: 300px;
		height: 500px;
	}