问题标签 [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 投票
0 回答
80 浏览

javascript - 如何在机车滚动时将文本粘贴到窗口顶部?

我在网页上使用机车并尝试创建一个粘性元素,该元素开始位于窗口底部,然后当我滚动时它移动到窗口顶部并在我继续向下滚动页面时停留在那里。

我尝试在文档页面上这样做,但它最终只是一个普通的滚动元素......感谢任何帮助。

Codepen供参考

0 投票
0 回答
58 浏览

locomotivejs - 向下滚动时是否可以有 locomotive.js 无限循环?

我想知道当你到达底部时是否可以使locomotive.js无限循环到内容的开头?

0 投票
1 回答
230 浏览

javascript - 如何获取滚动位置和文档高度然后运行函数并再次更新文档高度?

我的文档高度是 11886,滚动到文档底部时的滚动位置是 9542。

当我滚动到文档底部时,我想运行一个函数,该函数将再次增加文档的大小并加载更多内容。然后我需要更新文档高度并允许用户继续向下滚动。

当我再次到达底部时,我想运行该函数并更新文档高度。

使用Locomotive.js滚动。const scroll 正在创建滚动功能。

0 投票
1 回答
599 浏览

sticky - Can't wrap my head around Locomotive Scroll sticky 属性

我正在尝试修复英雄和页脚排序,因此当页面滚动时,内容将翻过(不动的)英雄,当您到达内容的末尾时,也会显示同样不动的页脚。

我搞砸了data-scroll-stickydata-scroll-target但没有成功。任何人都可以发光吗?

任何帮助表示赞赏!

密码笔

0 投票
0 回答
350 浏览

vue.js - 使用 Vue.js (gridsome) 在路线更改时更新机车滚动组件

我在 VueJs/Gridsome 中构建了一个组件,用于使用 locomotive-scoll 平滑页面滚动。在初始页面加载或硬页面重新加载时它工作正常,但仅在更改路由时就不行。我尝试了几种方法,例如向组件添加密钥或使用 watch 方法,但似乎没有任何效果。

自定义滚动.vue

引用组件的 Default.vue:

0 投票
0 回答
47 浏览

php - 使用机车滚动后无法向下滚动

我正在制作一个主页,当我实施 Locomotive Scroll 时,它卡在我的滑块上,我无法向下滚动。我试图隐藏我的滑块并且它起作用了。知道为什么它不能与我的滑块一起使用吗? 在此处输入图像描述

0 投票
1 回答
1046 浏览

javascript - 机车滚动 - 从水平切换到垂直和返回

我正在使用 Locomotive-Scroll ( https://locomotivemtl.github.io/locomotive-scroll/ ) 进行平滑和水平滚动,它很容易并且效果很好。但是,我也想集成一段垂直滚动。

视觉解释

我已经尝试了很多东西,但没有一个完全有效。我主要面临三个问题:

  • 我不明白为什么我的解决方案在一定程度上有效,而且我找不到任何关于 locomotive-scroll 的教程比添加 data-scroll 属性更进一步
  • 我没有找到将垂直滚动方向从向下更改为向上的方法
  • 如果我调整窗口大小,机车滚动刹车,只能通过重新加载来恢复

我目前的解决方案(我认为自己是初学者):

0 投票
2 回答
1619 浏览

javascript - 如何正确使用带有 Next.js 路由的 Locomotive Scroll?

我正在使用locomotive-scrollNext.js 并且一切正常。但是在路由到不同的页面后,我的卷轴不会破坏,并且 2 个卷轴相互重叠。

路由后如何locomotive-scroll在 Next.js 中正确重新初始化?

我的代码示例:

0 投票
0 回答
222 浏览

reactjs - 如何使元素停止在其原始位置(机车滚动)

我已经在一个带有 CSS 网格元素的页面中实现了机车滚动(反应)。代码沙盒链接: https ://vdo8m.csb.app/

该页面在机车滚动之前正确定位。这是元素;

CSS;

这是没有问题的html。但是当我添加 Locomotive-scroll 时,我的元素会相互重叠。这是我的机车卷轴配置;

我需要的是让内盒停在它的真实位置而不是相互重叠。我弄乱了不同的偏移值,但元素在远处“暂停”而不是停在其原始位置。该问题仅存在于移动视口中。代码沙盒链接: https ://vdo8m.csb.app/

0 投票
1 回答
609 浏览

javascript - scrollTo(target, options) 在移动设备中不起作用。(机车卷轴)

我面临一个奇怪的问题。在桌面上,一切正常,但是当我切换到移动设备时,发生了一些奇怪的事情,不知道为什么。scrollTo(target, options) 根本不起作用。在桌面水平模式上,对于移动设备,我已将其关闭,并且在移动设备上也关闭了平滑。

我的代码:

我也尝试过使用平滑真实的移动设备,但没有发生任何事情。请帮我解决一下这个。TIA