<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>One Page</title>
<script src='one.js'></script>
<style>
.box{
width: 500px;
height: 500px;
background: rgba(0, 255, 0, 0.5);
overflow-y: scroll;
}
</style>
</head>
<body>
<div class='box'>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
</div>
<div>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
</div>
<script src='jquery-3.1.1.min.js'></script>
<script>
window.onload = function(){
var demoDiv = document.querySelector('.box');
var eventType = 'mousewheel';
if (document.mozHidden !== undefined) {
eventType = 'DOMMouseScroll';
}
$('.box').on(eventType, function(event) {
var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);
if ((delta > 0 && this.scrollTop <= delta) || (delta < 0 && this.scrollHeight - this.clientHeight - this.scrollTop <= -1 * delta)) {
this.scrollTop = delta > 0? 0: this.scrollHeight;
event.preventDefault();
}
});
};
</script>
</body>
</html>
