向后滚动时视差元素位置不同答案

【问题标题】：Parallax elements not the same positon when scroll back向后滚动时视差元素位置不同
【发布时间】：2018-07-24 08:22:21
【问题描述】：

我为一些元素（矩形和圆形）创建了视差脚本，所以当我从上到下滚动时，元素应该移到顶部

元素起始位置直接使用添加到HTML中问题是当我向后滚动元素时向下移动，但当我到达页面顶部时它们不在相同的起始位置。

HTML：

<img style="top: 62%; left: 46.3%;" class="l-parallax_item" src="./path/to/img">
<img style="top: 74%; left: 42.7%;" class="l-parallax_item" src="./path/to/img">

CSS：父级有相对位置，l-parallax_item 是绝对位置

JS：

var parallaxElements = document.getElementsByClassName("l-parallax_item");
var lastScrollTop = 0;

window.onscroll = function() {

    var st = window.pageYOffset || document.documentElement.scrollTop; 

    if (st > lastScrollTop){
        console.log("bottom");
        for(i = 0; i < parallaxElements.length; i++) {
            var position = parallaxElements[i].offsetTop;
            var movePx = parallaxElements[i].getAttribute("data-px-per-scroll");
            parallaxElements[i].style.top = (position - parseInt(movePx))+"px";

        }
    } else {
        console.log("top");
        for(i = 0; i < parallaxElements.length; i++) {
            var position = parallaxElements[i].offsetTop;
            var movePx = parallaxElements[i].getAttribute("data-px-per-scroll");
            parallaxElements[i].style.top = (position + parseInt(movePx))+"px";
        }
    }

   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling

}

我注意到当我从上到下滚动时，我会收到更多的 console.log("bottom") 消息。 * 当我滚动顶部 > 底部时，反之亦然。所以我想这就是为什么当我进入底部>顶部时元素不在同一位置的原因。

http://prntscr.com/ka9osq

我该如何解决这个问题？

编辑：http://jsfiddle.net/r9751p8q/6/ 尝试滚动到底部然后返回，您会看到某些元素消失了

【问题讨论】：

可以把html和css上传到jsfiddle.net
请查看我刚刚用链接更新的帖子

标签： javascript html css parallax

【解决方案1】：

这是您的问题的可能解决方案。

HTML

<div class="section">
  <div style="top: 100px; left: 46.3%;" data-px-per-scroll="0.5" data-initial-position="100" class="l-parallax_item"></div>
  <div style="top: 300px; left: 37.7%;" data-px-per-scroll="0.9" data-initial-position="300" class="l-parallax_item"></div>
  <div style="top: 80px; left: 56%;" data-px-per-scroll="0.3" data-initial-position="80" class="l-parallax_item"></div>
  <div style="top: 230px; left: 75%;"  data-px-per-scroll="0.8" data-initial-position="230"  class="l-parallax_item"></div>
  <div style="top: 60px;left: 7.1%;" data-px-per-scroll="0.5" data-initial-position="60" class="l-parallax_item"></div>
</div>

function parallaxBlocks(){
  let parallaxElements = document.getElementsByClassName("l-parallax_item");
  let st = window.pageYOffset || document.documentElement.scrollTop; 
  let elementsLength = parallaxElements.length;

   for(i = 0; i < elementsLength; i++) {

    let movePx = 1 + parseFloat(parallaxElements[i].dataset["pxPerScroll"]);
    let position = 1 + parseInt(parallaxElements[i].dataset["initialPosition"]);
    parallaxElements[i].style.top = Math.floor(position - (st * movePx)) + 'px';

   }
}

window.addEventListener('scroll', parallaxBlocks)

但我也更改了您的 html。对于工作示例，请检查此fiddle 。

以及我在 JS 代码中实际所做的一些解释：

在此代码中，我们不需要检查是否向上或向下滚动，因为元素定位的逻辑已从它们的当前位置（如您的代码中）转移到它们的初始位置。
我使用let 来声明变量而不是var 出于范围原因（并且因为我喜欢新事物）。不过，如果您要支持旧版浏览器，您可能需要检查 caniuse 的兼容性。
对于top css 属性，我使用固定值，并将它们的原始顶部偏移存储在一个名为initial-position 的新数据属性中。这个初始位置稍后将用于计算每个元素的新位置。如果您需要 % 值，那么您可以将 top 属性保留为 % 值，但您还需要另一个循环来遍历所有 .l-parallax_item 并检查它们从顶部的偏移量并将此值记录在它们的 data-initial-position 中.
请注意，我使用的是dataset 而不是getAttribute。 dataset 适用于所有数据属性。看看cebab-case 是如何变成camelCase 的。更多阅读here
此外，px-per-scroll 不再是固定数量的像素，而是与顶部的滚动偏移量的比率。您可以玩一下小提琴，看看它是如何工作的。
奖励：why 我为元素长度添加了另一个变量，而不是在for 循环参数中使用它。

我相信还有另一种方法可以做到这一点，但希望这个方法对您有所帮助。

【讨论】：

【解决方案2】：

不工作的原因：

滚动并不精确，因为您的位置基于滚动的总和，所以定位最终会变得不可预测。向您展示我的意思：

您的console.log() 会在您每次滚动时触发。如果您将两个日志都更改为console.log(parallaxElements[0].style.top)，它会在您每次进行滚动移动时显示第一个视差元素的顶部位置。现在拿起你的鼠标并向下滚动一个“滴答”，然后向上滚动一个“滴答”并重复多次。位置数不会每次都一样，问题就出在这里。

解决方案：

根据实际 pageYOffset 确定您的视差元素位置。由于 Ale 已经发布了一个考虑到这一点的可行解决方案，因此还有一个代码示例是多余的。

【讨论】：