水平平滑滚动

Question

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

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

背景：我正在努力创造一种电影效果。

Answer 1

您可以执行以下操作滚动：

$（....）。animate（{scrollLeft：####}）;

您可以通过设置速度（持续时间）和缓动（动作的＆＃34;样式＆＃34;）来调整动画。

通过选中要滚动到的元素的offset()，可以获得要在scrollLeft中输入的数字。

Answer 2

2020年更新，以供将来的读者使用

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

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

API可与任何元素（窗口，文档，正文，自定义div，ecc ...）一起使用，并且可以随时取消每个滚动！

在这种情况下，只需调用API函数library(ggplot2) ggplot() + geom_point(data = dta1, shape = 21, alpha = 0.5, aes(x = LON, y = LAT, size = VALUE, fill = "value1")) + geom_point(data = dta2, shape = 21, alpha = 0.5, aes(x = LON, y = LAT, size = VALUE, fill = "value2")) + scale_fill_manual(values = c(value1 = "blue", value2 = "red")) + theme_light() + guides(fill = FALSE) 就可以解决问题，该函数为您设置了平滑滚动的锚点。

如果只想水平平滑滚动一个元素，则可以使用uss.hrefSetup或uss.scrollXTo(finalXPosition, yourContainer)。
其中：

• uss.scrollXBy(deltaX, yourContainer)是要滚动的DOM元素（文档是默认元素）
• youContainer是您希望容器的左边框位于滚动动画结尾处的“滚动宽度”
• finalXPosition是您希望cointainer滚动的像素数。
  

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