时间戳

首页 > 解决方案 > 机车滚动水平滚动 - 视差元素在文档加载时的位置不正确

javascript - 机车滚动水平滚动 - 视差元素在文档加载时的位置不正确

问题描述

我目前正在构建一个水平滚动网站，我正在使用 Locomotive Scroll 作为滚动库。

该页面相当简单：背景上有几行文字和一些视差图像。

让图像移动得更慢是相当简单的，只需为它们分配两个自定义属性：data-scroll（将组件标识为视差元素）和 data-scroll-speed="x"（定义其移动速度）。

但是，当页面加载时，图像的位置似乎不正确。当用户滚动时，它们的显示时间比应有的时间早得多，并突然移动到正确的位置。

只有在用户滚动页面后，元素才会移动到正确的位置。

将视差元素的位置 CSS 属性从绝对更改为固定或相对，或者将它们的显示值从块更改为内联块似乎都没有任何后果。

我相当确定这不是滚动库本身的问题 - 互联网上有几个例子表明它可以正常工作（例如https://codepen.io/sfi0zy/pen/PoGvYyy）。

这是一个显示我遇到的问题的片段：https ://codepen.io/rfBQ99vg/pen/QWddyRr

如您所见，对象仅在用户滚动后才捕捉到它们的位置。

这是用于运行滚动的代码 - 非常简单，我认为问题不在于：

const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true,
direction: "horizontal",
lerp:0.035,
multiplier:2.5
});

这些是视差元素的css属性：

.flowers {
position:absolute;
background-size: cover;
background-position: center center;
}

但是，我不知道我做错了什么，我将不胜感激任何反馈:)

标签： javascripthtmlcss

解决方案

我发现出了什么问题：虽然机车滚动接受负速度值（例如 data-scroll-speed="-3" ）如果滚动方向设置为垂直，但在水平滚动页面上使用它们会导致我之前描述的问题. 除非我弄错了，否则这是当前状态下库的限制或错误。

推荐阅读