问题标签 [locomotive-scroll]

我正在尝试在我的 Wordpress 网站上添加 Google 跟踪代码管理器脚本、带有 locomotivescroll.js 和 swup.js 的自定义主题。这是我在functions.php中用于集成的代码：

如果我在 GTM 上测试预览，我会收到“无法连接到网站”，但如果我进入主页的源代码，我会在顶部正文中找到脚本和另一个。在 header.php 我放： <?php wp_head(); /* insert scripts and tags in header */ ?>在头部和 <?php do_action('body_top'); ?>正文的开头

谁能帮助我？前面提到的Js库有问题吗？

使用 Locomotive Smooth 滚动，滚动工作正常，当滚动回顶部时出现问题，即使 CSS 检查不透明度为 1，标题也不会可见，所以不确定为什么标题不可见。

另一个奇怪的行为，如果我在开发控制台上取消勾选并勾选任何 CSS，或者如果我从关键字中选择全部，那么标题就会可见，如果我调整浏览器的大小，那么标题就会可见。

let options = { el: document.querySelector('[data-scroll-container]'), smooth: true, getSpeed: true, getDirection: true, reloadOnContextChange: true }

const scroll = new LocomotiveScroll(options);

标题有数据滚动数据滚动部分

我的导航中的链接使用带有锚标记的 URL (fe mysite.com/about#cv)。原因是即使我不在 fe about-page 上，我也想跳转/滚动到特定部分。通常这工作正常。但我正在使用机车滚动库。

我目前正在使用：

<script>$('.nav-link').on('click', function() {const slider = document.querySelector('#cv');locoScroll.scrollTo(slider)</script>

当我在锚点所在的页面上时，这很好用。但我希望能够从我网站上的任何地方访问特定部分。

我正在使用带有nuxtjs的 locomotive-scroll并在更改路线时获得了一些有线行为。在每次页面开始时更改路线后，我离开滚动我的上一页。我尝试了 nuxt scrollBehavior 功能，该功能无需使用机车滚动即可正常工作。

下面是我放在default.vue文件中的代码

我正在观察路线变化和更新机车。

提前致谢

如何配置 LocomotiveScrollProvider 以便在按下按钮时滚动到页面顶部？

我想解决一个关于调整大小后文档大小的问题。此外，页面大小在第一次调整大小时不正确，但在 2-3 次调整大小后正确设置。我试图在调用机车更新方法的滚动触发器函数上发出警报，但警报没有出现，所以我得出结论，刷新函数和调用更新的函数不起作用

调整大小后的问题：

目标：

机车的JS代码：

向上滚动时使用机车滚动会导致一些闪烁。上半部分的元素出现在视口中，延迟很小但很明显（可能为 0.1 秒）。我看了很多演示，但几乎所有这些网站都有相同的问题。例如，官方演示：查看“04.固定元素”部分 - 向上滚动时图像闪烁。

使用 Locomotion 平滑滚动时是否不可避免？

Windows 上的 PS Chrome 97.0

更新 1 由于实施了虚拟滚动条，该问题仅出现在基于 Chrome 的 94 版浏览器上。

找到了一个临时解决方案：

但是，如果您对页面上的某些元素使用固定位置，这会破坏布局。

关于机车卷轴的部分，我有两个问题。

第一个涉及在第二个过去后不再应该显示在屏幕上的静态部分。

问题 #1

可以看到第一部分的底部

第二个问题是当你在上面时出现的一个部分，它应该在你到达那里之前是可见的

问题 #2

前

当我在上面

我想它来自我的机车标签管理，但我很快就卡住了，因为没有数据滚动部分，我的部分不显示......我附上了一个代码笔供你测试。但是在 codepen 问题 1 上没有出现，因为第 1 节由于某种原因没有与第 2 节重叠......

包含水平部分、机车和进度条增量的 javascript 代码

https://codepen.io/adrian-jamet/pen/zYEbJmL

我基于水平部分的笔代码： https ://codepen.io/cameronknight/pen/qBNvrRQ

我的网站上有部分正在使用ScrollTrigger. 一旦我实现Locomotive JS了，我所有的ScrollTrigger动画都停止了工作。

我通读了论坛，发现您需要update() ScrollTrigger何时Locomotive滚动。我实施了这一点，但没有看到任何结果。

然后，我调整了窗口的大小和我的ScrollTrigger动画，它们开始工作。

简而言之，动画会在调整大小时触发，但不会在页面加载时触发。

我已经实施update()并尝试过refresh()，但没有运气。

演示（这里也显示问题）：

测试 1

我意识到的是，如果我注释掉我的所有内容locomotive js并运行：

将logs显示，但它们不会在locomotive活动时显示。

不确定这是否表明出了什么问题？

测试 2

在我的代码片段的最后，我运行了以下命令来检查是否refresh()正在运行并且它正在返回else语句。再次，不知道为什么。

重建步骤：

1. 打开这个小提琴
2. 将输出框扩大到某个宽度（即1300px）
3. 运行小提琴
4. 向下滚动，您会看到未加载的元素
5. 将输出框调整为更小的尺寸
6. scrollTrigger动画现在出现

这是一个展示问题的 gif：

我们正在寻找机车（https://locomotivemtl.github.io/locomotive-scroll/）div偏移位置，当我们点击按钮时它会向上滚动而不使用'data-scroll-to'......实际上我们已经创建了当我们点击分页锚页面时分页应该向上滚动直到标题结束。

谢谢