子元素滚动不影响父元素

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;
}

转载于:https://www.cnblogs.com/sunhk/p/5186072.html