Roll content without affect parents
更新日期:
在一个容器内滚动内容而不影响其父结点
(需要jQuery和mousewheel插件http://brandon.aaron.sh)
1
2
3
4
5
6
<div id="outer-container" class="container">
<div id="inner-container" class="container">
<img id="inner-content" src="http://www.baidu.com/img/bdlogo.png">
</img>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
var innerContainer = $('#inner-container');
var innerContent = $('#inner-content');
innerContainer.on('mousewheel', function(e, delta) {
var $this = $(this);
var scrollableDist = innerContent.height() - $this.height();
var curScrollPos = $this.scrollTop();
if ((delta < 0 && curScrollPos >= scrollableDist) || (delta > 0 && curScrollPos <= 0)) {
e.preventDefault();
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
border: 1px solid blue;
margin: 100px;
overflow: auto;
}
#outer-container {
height: 1000px;
}
#inner-container {
height: 300px;
}
#inner-content {
height: 700px;
}