问题标签 [locomotive-scroll]

我已经尝试过 barba.js 和 locomotive-scroll 工作（我也尝试过 scrollmagic），但我没有让它正常工作。如果我将 locomotive-scroll 放在 about 页面上并重新加载浏览器，它可以工作，但如果我从那里转到主页并返回 about 页面，它会给我一个错误并停止工作。与其他脚本没有问题，这就是为什么我认为一定有一些不兼容的原因。我尝试了很多方法，但它们都给了我一个错误。最后一个是：

我正在使用 Locomotive Scroll 来获得平滑的滚动效果。

到达某个部分时，我需要更改整个 HTML 的背景颜色和颜色。目前我正在使用机车上的调用事件来添加一个名为“updateBg”的自定义函数，当它被调用时，我会更改包装器的背景和颜色。

棘手的部分是，如果该部分仍在视口中并且我反转滚动它不会改变颜色。

示例：如果我滚动到第二个介绍部分（并且第一个介绍在视口中），它将变为黑色背景。但是，如果我向上滚动，它不会变为白色背景，因为该部分没有从视口中出来，并且最后一次调用是黑色背景。

您必须完全通过一个部分才能反转颜色。

我认为唯一可行的方法是找到部分偏移顶部并根据部分的偏移顶部和机车的滚动增量设置颜色。问题是我唯一可以使用它们的偏移量是触发调用事件时。

我怎样才能使所有部分在负载上偏移顶部？有人可以想出另一种解决方法吗？

我正在使用 locomotive-scroll 库在我的项目中平滑滚动。滚动容器位于 html 主标签上（不包括页眉和页脚）。一切正常，除了页面的一部分未在末尾显示（大约页脚）。我在 CSS 中搜索，但没有找到任何东西。谢谢。这是我的标记：

如何像这样 Amanda Braga Portfolio在 Scroll 上平滑更改页面颜色

这里我们可以添加改变Pagecolor的方法

我正在尝试实现与此示例相同的滚动效果。

第二节

根据文档，我添加了 data-scroll-direction="horizo​​ntal" 但是它相反，向下滚动它从右到左移动但应该是其他方式。也没有得到如何用js控制transform translateX / translateY？如果我想要自定义轨迹怎么办？

HTML：

JS：

我正在使用插件 Locomotive Scroll 开发一个网站，以创建流畅的滚动体验。该插件工作正常。但是，我希望在开始滚动页面时有一个具有典型降低高度效果的固定标题（顶部菜单）。

我找不到在同一页面上使我的固定标题效果与 Locomotive Scroll 一起使用的方法。

下面是机车滚动的 JS 代码：

还有我的标题效果的 jQuery 代码：

任何帮助将不胜感激，谢谢！

我有以下代码...

当我运行它时，我看到...

用“飞溅”来称呼

但即使在我向下滚动到侧边栏区域后，我也看不到预期的......

用“侧边栏”调用

我也从来没有看到滚动事件起作用。

我错过了什么？

完整的代码库

更新

我也尝试过直接使用模块化滚动...

但是这两个电话都没有以这种方式打印。

更新 2

这是我尝试用 div 而不是 Web 组件做的一个更简单的版本......

我正在尝试使用 Ricardo Mendieta 的 Ink Cursor 制作自定义光标。https://codepen.io/mendieta/pen/WgvENJ

光标正在工作，但我遇到的问题是我使用horizontal带有机车滚动的滚动。当我滚动时，鼠标位置不会更新。我试图用鼠标滚轮功能解决这个问题。我可以控制台记录鼠标滚轮事件，但它不会更新我的鼠标位置。

当滚动方向为水平方向时，有没有办法可以在滚动时更新鼠标位置。

我想在我的项目中使用 locomotive.js 并将其安装在 vscode 上（npm install locomotive-scroll），甚至遵循了本教程：

https://www.youtube.com/watch?v=zrM6N-G6U_M&list=PLNf1MNtmy_vyQkFjuNqxKpQT0U_rbC_y8&index=19

我的问题是我收到一条错误消息：

未捕获的语法错误：无法在模块外使用 import 语句

我不知道该怎么做。我已经对编译器和类似的东西进行了一些研究，但我认为本教程没有提到任何这些。字面意思是：安装、复制、粘贴，一切顺利。

这是脚本：

并将其链接到我的html：

任何帮助或想法将不胜感激。

我正在尝试一个简单的 ScrollTrigger 动画，当我滚动时，我的文本会在 x 轴上移动。然而，它根本不动。

HTML：

CSS：

JS：

这是我第一次使用 GSAP，但这应该很简单。我也在使用 locomotive.js 但我不知道这是否会影响它。