使用javascript根据wheelscroll设置div元素的位置答案

【问题标题】：Set div-element's position depending on wheelscroll with javascript使用javascript根据wheelscroll设置div元素的位置
【发布时间】：2016-08-25 17:43:34
【问题描述】：

$( document ).ready(function() {
  animate_in();
});

function animate_in() {
  addEventListener('wheel', function(event){
    var targetCube = $('.cube-container.cube-0');
    var wScroll = event.deltaY/100;
    var currentPosition = targetCube.offset().top;
    var newPosition = currentPosition + wScroll;
    console.log(currentPosition)
    targetCube.css({
      'top' : newPosition
    });
    console.log(newPosition)
  });
}

section .wrapper{
  position: absolute;
  overflow: hidden;
  display: block;
  width: 100vw;
  height: 100vh;
}
section .wrapper a.cube-container{
  position: absolute;
  width: 30%;
  background: pink;
}
section .wrapper a.cube-container:after{
  content: '';
  display: block;
  padding-top: 100%;
}
section .wrapper a.cube-0{
  top: -200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="wrapper">
    <a class = "cube-container cube-0" href="")>
      <div class="box cube-0">
      </div>
    </a>
  </div>
</section>

我有一个使用 CSS 设置在页面外的元素。我正在尝试使用javascript对其进行动画处理。它自己的页面不可滚动，所以我正在捕捉滚轮滚动。为了完成这项工作，我这样做：

在$( document ).ready 上我加载添加EventListener 的函数；
我得到了元素；
我提取它的当前位置；
我得到了车轮增量；
我计算新位置；
我将元素的 css 顶部值设置为新的计算位置。

一切似乎都在工作，但由于某种原因，当我再次滚动时，它的位置会跳到某个值（元素大小取决于窗口尺寸，并且每个尺寸的数字都不同）。我检查了它不是元素高度。我不会在其他地方访问或更改它的位置。但是下次事件发生时，值已经不同（下一个事件的 currentPosition 与前一个事件的 newPosition 不同）。

函数如下：

function animate_in() {
  addEventListener('wheel', function(event){
    var targetCube = $('.cube-container.cube-0');
    var wScroll = event.deltaY/1000;
    var currentPosition = targetCube.offset().top;
    var newPosition = currentPosition + wScroll;
    targetCube.css({
      'top' : newPosition
    });
  });
}

如果我从这一行中减去几个事件的新旧位置的 console.log 推导出的数字：

var newPosition = currentPosition + wScroll - CONSTANTDIFFERENCE;

-我让它向右滚动，但是当我调整屏幕大小时，数字会改变，我看不到图案。

以下是前后位置的日志：一种屏幕尺寸：

scripts.js:41 -515.5
scripts.js:45 -515.475
scripts.js:41 -430.96875
scripts.js:45 -430.94375
scripts.js:41 -346.4375
scripts.js:45 -346.4125

差异是恒定的：84,50625。

还有另一个屏幕尺寸（更大）：

scripts.js:41 -374.5
scripts.js:45 -374.475
scripts.js:41 -148.96875
scripts.js:45 -148.94375
scripts.js:41 76.5625
scripts.js:45 76.5875

差异再次保持不变，但不同：225,50625。

任何想法这个数字来自哪里或者我做错了什么？或者，也许您知道另一种方法？

【问题讨论】：

如果您可以使用jsFiddle 或类似的方式提供一个演示来重现您的问题，这将对我有所帮助。
添加了一个 sn-p。效果类似，但规模较小 - 每次事件触发时，currentPosition 与 newPosition 在上一个事件结束时留下的效果不同。

标签： javascript jquery css css-position mousewheel

【解决方案1】：

看起来问题是因为 offset().top 给出了与 DOM 的绝对偏移量，并且 top 是相对于它嵌套的 .wrapper 元素设置值。因此添加：

var offsetElement =       $( '.wrapper' );
var offsetPosition =      offsetElement.offset().top;

然后重写：

var newPosition =         currentPosition + wScroll - offsetPosition;

我让它平滑滚动。

$( document ).ready(function() {
  animate_in();
});

function animate_in() {
  addEventListener('wheel', function(event){
    var targetCube = $('.cube-container.cube-0');
    var wScroll = event.deltaY/5;
    var currentPosition = targetCube.offset().top;
    var offsetElement =       $( '.wrapper' );
    var offsetPosition =      offsetElement.offset().top;
    var newPosition =         currentPosition + wScroll - offsetPosition;
    console.log(currentPosition)
    targetCube.css({
      'top' : newPosition
    });
    console.log(newPosition)
  });
}

section .wrapper{
  position: absolute;
  overflow: hidden;
  display: block;
  width: 100vw;
  height: 100vh;
}
section .wrapper a.cube-container{
  position: absolute;
  width: 30%;
  background: pink;
}
section .wrapper a.cube-container:after{
  content: '';
  display: block;
  padding-top: 100%;
}
section .wrapper a.cube-0{
  top: -200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="wrapper">
    <a class = "cube-container cube-0" href="")>
      <div class="box cube-0">
      </div>
    </a>
  </div>
</section>

【讨论】：