jQuery在移动设备上使用skrollr自动滚动

jQuery to auto-scroll with skrollr on mobile?

本文关键字：skrollr 滚动 移动 jQuery      更新时间：2023-09-26

我用skrollr为iOS制作了一个视差网站。 我想以编程方式向下滚动到页面上的某个点。 我使用过jquery滚动插件，它们适用于桌面，但不适用于移动设备。 如何使用 jQuery 模拟向上滑动或以某种方式模拟滚动到另一个点？ 谢谢！

编辑：这不起作用的原因是，在移动设备上，由于iOS在滚动过程中停止动画，skrollr实际上并没有滚动。 相反，它侦听触摸事件并移动元素。 这就是为什么scrollTo插件不起作用的原因。 （来源：https://github.com/Prinzhorn/skrollr#mobile-support）

实际上，我只是意识到 skrollr API 内置了这个！

我可以调用skrollr.animateTo(400)，skrollr 是用于启动 skrollr 的变量。

希望这对其他人有所帮助！

这更像是仅供参考。

在使用skrollr为移动设备实现自动滚动功能时，我发现的优缺点是：

我为触摸事件使用了两个库[jQuery Mobile，hammer.js]我最终坚持使用锤子，因为我更喜欢文档。

我在ipad上使用它的方式很简单。如果您点击并按住右侧屏幕，我做到了，它会自动向下滚动，直到您松手。反之亦然。

我的问题是它无法读取发布事件并继续滚动，用户无法阻止它。

在弄乱了一会儿之后，我决定改变它。我所做的是放置两个用户可以点击的按钮，它会自动滚动到我整个 skrollr 动画的下一部分。

这是我编写的代码示例。 

var ai = 0;
var positionArray = [0, 1244,3194,15468]
$(function () {
var rightArrow = document.getElementById('right-arrow')
var mcRight = new Hammer(rightArrow);
mcRight.on("tap", function (ev) {
    ai++
    s.animateTo(positionArray[ai])
    //alert(s.getScrollTop())
});

var leftArrow = document.getElementById('left-arrow')
var mcLeft = new Hammer(leftArrow);
mcLeft.on("tap", function (ev) {
    ai--
    s.animateTo(positionArray[ai])
});
})

希望这有帮助。我想要它以我原来的方式点击并按住，但两个插件在滚动时都无法读取点击发布事件。

另一个通过查看文档非常容易解决的问题是，无论动画部分的长度有多长，都需要 1 秒才能到达那里。如果它是一个小部分，那就很好，但如果你有很长的部分，它会很快地擦洗它。

相关文章：