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

您需要使用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/

尝试查找delta值。

Answer 2

您的代码无法正常工作，因为每次触发滚动事件时，都会执行图像位置动画。但是这个动画需要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();
	$("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();
	$("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）
滚动触发动画
动画开始
滚动位置从0px到10px
动画结束
你再次向下滚动，循环......

确定这有效但在大多数情况下，您将在动画期间多次滚动：

向下滚动
最终滚动位置1被计算为10px
滚动触发动画1
动画1开始
滚动位置从0px变为3px
再次向下滚动
最终滚动位置2被计算为13px（3 + 10）
动画2开始
滚动位置变为3px到10px（动画1的最终位置）
动画1结束
滚动位置从10px变为13px（动画2的最终位置）
动画2结束

你看到在两个滚动事件之后，你有13px作为滚动位置，而你期望它是20px。

我的方法不是依赖于定位的相对值（基于图像的先前位置是什么是它的新位置）而是依赖于绝对值（基于div的滚动是什么新的图像的位置）。

希望你理解！如果有任何不清楚的地方，请告诉我。

PS：我更新了代码段，以便您可以看到如何处理左右动画。

滚动时移动图像

2 个答案: