问题标签 [locomotive-scroll]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
878 浏览

javascript - 如何在窗口调整大小时删除/重新加载机车滚动?

我有一个正在构建的网站,它在桌面上使用水平布局,并在较小的屏幕上切换回原生垂直布局。我正在使用机车滚动,效果很好,但我似乎无法缩小窗口大小。

这是大屏幕的功能

在 window.resize 事件中,如果宽度低于移动阈值,我尝试将其销毁并再次调用它,但方向为“垂直”而不是“水平”。

有任何想法吗?

0 投票
2 回答
1832 浏览

reactjs - 带有 React 17 的机车滚动

我正在尝试将Locomotive Scroll与 React 17 一起使用。我不知道如何正确设置组件以使其正常工作。我找到的所有示例都是针对旧版本的 React,我不明白。

有谁知道如何让它工作?

我想它应该看起来像这样:

0 投票
2 回答
622 浏览

angular - 如何在 Angular 中使用机车滚动

有没有办法以角度使用机车滚动。我在谷歌上没有找到任何关于此的内容。有人曾经在角度使用过机车卷轴吗?

我尝试将它导入到我的 homepage.component.ts 中:

homepage.componenet.html :

提前致谢。

杰里米。

0 投票
1 回答
975 浏览

javascript - Locomotive Scroll is flickering

I am using the locomotive scroll library (https://github.com/locomotivemtl/locomotive-scroll) on our new website. Sometimes, the scrolling is kind of stuck and flickering, but I cannot make out what this is caused by. Maybe this is, since there are some json scripts not finished and throwing errors in the console or because the nuxt project is still in staging and so everything is kind of slow. Maybe you have had some similar experiences - I am happy for every feedback. Please let me know if you need more codes provided.

Web: https://gowest.go-stage.at/de/ user: customer password: gowest

0 投票
0 回答
623 浏览

next.js - 使用 Next.js 进行机车滚动

我正在尝试在我的 Next.js 项目中使用 locomotive-scroll 和 gsap,但机车部分仍然存在问题。例如,这个改编后的程序在 React 中运行良好,但在 Next 中却不行。我评论了所有的机车线路,至少看看程序应该是什么样子。

我尝试添加

const withTM = require("next-transpile-modules")(["locomotive-scroll"]); module.exports = withTM({});

在 next.config.js 文件中,但它还不起作用。

有什么帮助吗,请。

此外,滚动条样式不受机车样式的影响。我想由于样式名称由 Next.js 更改。

提前致谢。

0 投票
1 回答
657 浏览

javascript - 机车滚动切换标题 onscroll

我第一次尝试机车滚动,到目前为止一直很好,直到我不得不尝试切换标题样式 onscroll,因为事件监听器不起作用。我研究了 gsap 滚动触发器和交叉点观察器,但我很难弄清楚,因为我对该领域知之甚少。

我怎样才能使这项工作/在机车卷轴上做这样的事情?

HTML/CSS/JS

0 投票
1 回答
1061 浏览

javascript - 机车滚动功能触发器

有人可以告诉我如何在机车滚动中查看元素时触发功能,我是菜鸟,请详细说明,提前谢谢

0 投票
0 回答
65 浏览

javascript - 光标跟随器在 Chrome 上滞后,在 Firefox 上流畅

我希望我的光标后面跟着一个延迟很短的圆圈。问题是它在 Firefox 上运行非常顺利,而在 Chrome 上却非常滞后。

JS:

CSS:

我很难在这里破解代码,希望能在这件事上得到一些帮助。此外,我正在使用 Locomotive 滚动,但看到 Firefox 使用相同的代码按预期工作应该不是问题。

0 投票
1 回答
134 浏览

svg - 在机车滚动中使用数据滚动的 SVG 路径动画

当 SVG 元素进入视口时,我正在尝试为 SVG 路径设置动画,我在我的网站上使用 Locomotive Scroll。我尝试使用 Locomotive Scroll 的 data-scroll,它可以在视口中进行元素检测,但不幸的是,当我检查浏览器的开发控制台时,我发现,当 SVG 元素在视口中时,没有.is-inview类应用于 SVG 元素。

(我尝试将数据滚动添加到 SVG 和 SVG 路径,仍然没有响应)。

0 投票
2 回答
1032 浏览

nuxt.js - Nuxt 与 LocomotiveScroll 和 Gsap

我一直在努力将locomotive-scrollGsap实施到 Nuxt 项目中。我相信与 DOM 和 SSR 有关。我检查了从 scrollproxy Gsap 到 Nuxt 和机车的所有文档,但我没有更多的线索。

如果你们有任何建议,非常欢迎帮助。感谢您的时间。

这是错误

TypeError:无法读取未定义的属性“滚动”未
捕获类型错误:_triggers[_i].update 不是函数未捕获类型错误
:无法读取未定义的属性“匹配”

在 plugins/locomotive.js 中创建

在 nuxt.config.js 中配置

在 app.vue 中添加

在 app.vue 的挂载钩子中触发