Question

＆＃13;

$( 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)
  });
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

在$( document ).ready上我加载了我添加EventListener;
我得到了元素;
我提取它的当前位置;
我得到了轮子deltaY;
我计算新职位;
我将元素的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。

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

Answer 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>

根据wheelcroll使用javascript设置div-element的位置

1 个答案: