滚动时移动图像

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/

尝试找到你的增量值。