为什么不起作用？答案

【问题标题】：Why doesn't works?为什么不起作用？
【发布时间】：2020-08-22 10:51:48
【问题描述】：

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

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>

【问题讨论】：

在你的代码中你有“0px”然后是“pos”。删除零并添加 "px" after "pos" 代替。这将导致所有 '.spegs' 在您滚动时向右移动（刚刚检查过）。

标签： javascript html scroll dom-events

【解决方案1】：

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

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

  }
})

【讨论】：