带有Mootools的水平滚动条

Question

我正在为自己创建一个网站，并且正在使用一个自定义的水平滚动条，该滚动条是从另一个网站获得的Mootools完成的（并获得了他们的使用许可）。 尽管我设法使滚动条以我想要的方式运行，但我希望解决两个问题，而我自己却不知道该怎么做。

我已经建立了一个简单的演示页面在这里 。

您可以使用鼠标滚轮/触控板上下或左右滚动，可以抓住滚动条并将其拖动，也可以单击直线上的任意位置直接跳转。 因此所有功能都可以。 我的问题是：

1. 如果滚动到中间（或起始位置以外的任何位置），然后调整浏览器窗口的大小，即使内容停留在原处，滚动柄也会跳回到起始/左侧。 如果然后再次开始滚动，则内容将跳回以与滚动手柄的位置对齐。 理想情况下，当调整窗口大小时，手柄将保持放置状态，但是我不知道该如何独自完成操作。

2. 在页面的结尾/右边，我想有一个后退按钮，可将您平滑地滚动回到开始/“顶部”。 我所管理的最好的就是您现在看到的内容，其中内容平滑地向后滚动，而滚动条只是跳回到其第一位置。 虽然我可以通过直接将其跳回起点来解决此问题，但如果滚动条像内容一样平滑地向后滚动，它肯定会更好。

任何帮助，将不胜感激！

Answer 1

发生第一个问题是因为每次窗口调整大小时都会调用positionIt（）。 查看该函数，您可以看到每次都在初始化bottomSlider。 我将positionIt（）分解为初始化函数和定位函数，并确保在调整窗口大小时仅调用定位函数。

第二个问题可能是通过为bottomSlider创建一个单独的step（）函数并在onChange中调用它来解决的，而不是使用内联匿名函数。 然后，您可以创建一个计时器或补间动画，以调用step（）将滚动条移回其原始位置（并随后根据其移动视口。）

希望这是有道理的！