时间戳

首页 > 解决方案 > 为什么不起作用？

javascript - 为什么不起作用？

问题描述

为什么它不起作用？我希望滚动上的数字和“h3”都接收数据量的ax变换

window.addEventListener('scroll', function(e) {

  var target = document.querySelectorAll('.speg');
  var offset = window.pageYOffset;
  var index = 0,
    length = target.length;

  for (index; index < length; index++) {

    var pos = offset * target[index].dataset.xoff;
    target[index].style.transform = 'translateX(0px' + pos + ')'

  }

})
<div class="spiegazione">
  <div class="speg-sub">
    <img class="speg" data-xoff='5' src="./svg/number1.svg">
    <h3 class="speg">TITLE</h3>
    <p class="text-spiegazione">Lorem ipsum </p>
    <img class="speg" data-xoff='5' src="./svg/number2.svg">
    <h3 class="speg">TITLE</h3>
    <p class="text-spiegazione"> Lorem ipsum </p>
    <img class="speg" data-xoff='5' src="./svg/number3.svg">
    <h3 class="speg">TITLE</h3>
    <p class="text-spiegazione"> Lorem ipsum </p>
  </div>
</div>

标签： javascripthtmlscrolldom-events

解决方案

您缺少一个元素的日期标签，但仍然存在一些问题，请参阅我的示例

https://jsfiddle.net/4w58ed3o/2/

JS：

window.addEventListener('scroll', function(e) {

  var target = document.querySelectorAll('.speg');
  var offset = window.pageYOffset;
  var index = 0,
    length = target.length;
  for (index; index < length; index++) {

    var pos = offset * target[index].dataset.xoff || 0;
    console.log('translateX(' + pos + 'px)');
    target[index].style.transform = 'translateX(' + pos + 'px)'

  }
})

推荐阅读