jquery - 水平平滑滚动

Question

我正在尝试基于锚定创建平滑滚动的水平效果。即固定导航链接在点击时滚动到一个锚点（例如id="#two"）。

我已经能够使用 CSS Tricks 示例进行垂直滚动。（http://css-tricks.com/examples/SmoothPageScroll/#）但不能在我的一生中将相同的平滑滚动应用于水平情况。

背景：我正在尝试创建胶片效果。

Answer 1

您可以通过以下方式滚动：

$(....).animate({scrollLeft: ####});

您可以通过设置速度（持续时间）和缓动（动作的“风格”）来调整动画。

offset()您可以通过检查要滚动到的元素的 来获得要进入 scrollLeft 的数字。

Answer 2

面向未来读者的 2020 年更新

我最近发布了一个跨浏览器平滑滚动 API，它解决了这个问题以及许多其他与平滑滚动相关的问题。

使用 API，您可以滚动到某个 X 或 Y，按一定量或 scrollIntoView 任何您想要的元素。

该 API 适用于任何元素（窗口、文档、正文、您的自定义 div、ecc...），并且可以随时取消每个滚动！

uss.hrefSetup在这种情况下，只需调用为您设置平滑滚动锚点的 API 函数即可解决问题。

如果你只想水平平滑滚动一个元素，你可以使用uss.scrollXTo(finalXPosition, yourContainer)or uss.scrollXBy(deltaX, yourContainer)。
在哪里：

• youContainer是你要滚动的 DOM 元素（文档是默认的）
• finalXPosition是您希望容器的左边框位于滚动动画末尾的“滚动宽度”
• deltaX是您希望您的硬币容器滚动的像素数。
  

在这里您可以找到所有文档：GITHUB REPO