1
我想滾動到下一個div噹噹前div幾乎達到其下限。如何計算div的下限並滾動到下一個div?
我正在使用jQuery插件MouseWheel。我有下面的代碼,當我滾動時運行動畫scrollTop。但是,當它達到某個預期的點時,並不是它的下限。因爲,一些div包含大量帶有圖片的文字。
這是結構HTML
<html>
[...]
<body>
<div id="main">
<div class="item">
[Only a Image]
<!-- Only a Img? I'm 2px distance to the next div OK, ScrollTop When Scroll1 -->
</div>
<div class="item">
[Some Text]
<!-- mmmm Some text. Ok, I let you read this.. Scroll 1.. Scroll 2.. Scroll 3..
Wait! I'm 40px distance to the next div ... scrollTop -->
</div>
<div class="item">
[Some text with Image]
<!-- mmmm Some text with Image. Ok, I let you read this.. Scroll 1.. Scroll 2.. Scroll 3.. Scroll 4... Scroll 5.. Scroll 6..
Wait! I'm 40px distance to the next div ... scrollTop -->
</div>
<div class="item">
[....]
</div>
</div>
</body>
</html>
這是JS:
$('#main').on('mousewheel', '.item', function(e) {
if (e.deltaY < 0) {
$('html, body').animate({
scrollTop: $(e.currentTarget).next().offset().top
}, 1000);
} else {
$('html, body').animate({
scrollTop: $(e.currentTarget).prev().offset().top
}, 1000);
}
e.preventDefault();
});
我與一些更新我的結構HTML註釋。 – Dvex