滾動時移動圖像

Question

我從這個小提琴（http://jsfiddle.net/MMZ2h/4/）中瞭解到如何在滾動時移動圖像，但如果上下滾動一段時間，圖像最終會移出邊界。這是爲什麼？我們如何解決這個問題？

var lastScrollTop = 0; 
$("div").scroll(function (event) { 
var st = $(this).scrollTop(); 
if (st > lastScrollTop) { 
    $('img').animate({top: '-=10'}, 5); 
} else { 
    $('img').animate({top: '+=10'}, 5); 
} 
lastScrollTop = st; 
}); 

Answer 1

您的代碼無法按預期工作，因爲每次觸發滾動事件時，都會執行圖像位置動畫。但是這個動畫需要10毫秒才能結束，因爲你指定了一個基於當前位置的增量或減量，所以你的位置將根據錯誤的位置計算，並在一段時間後中斷。

試試這個代碼

var delta = 2; // specify the delta you want 
 
var initialImgScrollTop = $("img").offset().top; // get the current top position of your image 
 
var initialImgScrollLeft = $("img").offset().left; 
 
$("#div1").scroll(function (event) { 
 
    var st = $(this).scrollTop(); 
 
\t $("img").animate({ top: initialImgScrollTop - st * delta }, 10); // compute the position your image should be 
 
}); 
 

 
var scrollHeight = $('#div2').prop('scrollHeight') - $('#div2').innerHeight(); // get the scroll height 
 
var initialMiddleScroll = scrollHeight/2; // compute the middle scroll 
 
$("#div2").scrollTop(initialMiddleScroll); // set the scroll to middle so you can go left and right 
 
$("#div2").scroll(function (event) { 
 
    var st = $(this).scrollTop(); 
 
\t $("img").animate({ left: initialImgScrollLeft + (st - initialMiddleScroll) * delta }, 10); // compute the position your image should be 
 
});

div { 
 
    width: 150px; 
 
    height:150px; 
 
    overflow: scroll; 
 
    display: inline-block; 
 
} 
 
img { 
 
    position: absolute; 
 
    top:400px; 
 
    left:150px; 
 
    width:50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1">This is just some stupid text unworthy of being read, so please don't waste 
 
    <br>your time reading this nonesense. 
 
    <br>Hey! why are you still reading this garbage? 
 
    <br>Stop reading now and start doing something useful, such as getting this leaf to move up 
 
    <br>while you scroll this page. 
 
    <br>On second thought, maybe just continue reading. 
 
    <br>This might be more productive then whatever 
 
    <br>it is you were doing before.</div> 
 
<div id="div2">This is just some stupid text unworthy of being read, so please don't waste 
 
    <br>your time reading this nonesense. 
 
    <br>Hey! why are you still reading this garbage? 
 
    <br>Stop reading now and start doing something useful, such as getting this leaf to move up 
 
    <br>while you scroll this page. 
 
    <br>On second thought, maybe just continue reading. 
 
    <br>This might be more productive then whatever 
 
    <br>it is you were doing before.</div> 
 
<img src="http://sweetclipart.com/multisite/sweetclipart/files/imagecache/middle/nature_seasons_spring_leaf_green.png">

----- ----- UPDATE

我將試圖解釋在你的代碼正是打破。 讓我們從理想的情況下，開始時，你的代碼工作：

• 向下滾動
• 最終滾動位置被計算爲10px（從10增​​加至10）
• 滾動觸發動畫
• 動畫開始
• 滾動位置從0像素變爲10px的
• 動畫結束
• 你向下滾動再次，循環...

好這個工作，但在大多數情況下，你會在動畫過程中滾動多次：

• 向下滾動
• 最終滾動位置1計算爲10px
• 滾動觸發動畫1
• 動畫1開始
• 滾動位置從0px變爲3px
• 向下滾動再次
• 最終滾動位置2被計算爲13像素（3 + 10）
• 動畫2開始
• 滾動位置去的3px爲10px
（動畫1的最終位置）
• 動畫1結束
• 滾動位置從10px的變爲13像素（動畫2的最終位置）
• 動畫2結束

您可以看到，在兩個滾動事件之後，您將滾動位置設置爲13px，而您期望它爲20px。

我的方法是不依賴於定位的相對值（基於圖像的以前的位置是什麼新的位置），而是取決於絕對值（基於div的滾動是什麼圖像的新位置）。

希望你明白！如果有什麼不清楚的，請告訴我。

PS：我更新了代碼片段，以便您可以看到如何爲左右動畫執行操作。

Answer 2

您需要使用mouse Wheel event，並從事件中提取delta。

見我的榜樣，我希望它幫助：

document.getElementsByTagName('div')[0].addEventListener('wheel', 
function(e) { 
    if(e.wheelDelta > 0) { 
    $('img').animate({top: '+=3'}, 10); 
    } else { 
    $('img').animate({top: '-=3'}, 10); 
    } 
}); 

http://jsfiddle.net/qnqvzh87/

嘗試找到你的增量值。