Question

我在这里没有想法。我试图制作一个侧滚动条来控制整个文档的幻灯片。正如你在我的Jsfiddle上看到的那样，我一直在试验，但无法让它发挥作用。这是标记和CSS。您可以在底部的链接上看到更精细的版本。欢迎任何帮助。

HTML

<div id="sidescroll">
    <div id="sidescrollbtn"></div>
</div>

CSS

#sidescroll{height:80px;width:10px;background:grey;border:1px solid black;margin:0 auto;}
#sidescrollbtn{height:10px;width:10px;background:red;margin-top:10px;}

http://jsfiddle.net/vinicius5581/33fx6dpr/

Answer 1

这是一个更新的小提琴，解决了评论中的一些问题。

首先，这里是小提琴链接：http://jsfiddle.net/dLbbntwz/

我想做的其中一件事就是清理代码并减少之前各个up/down事件处理程序的重复。相反，我有一个函数_scroller，然后将1/-1传递给实际的_scroll逻辑。

此外，还增加了鼠标滚轮逻辑的演示。所以现在它同步了！

正如您所提到的，如果您单击向下然后将光标移离按钮，则会出现一个丑陋的错误。这是由于间隔未被清除。我在其他评论中提到你可以设置一个标志并检查文档级别（允许用户将光标移离按钮 - 这对MouseEvents感觉更“正确”）。我已经更新了小提琴以使用该逻辑。感觉好多了？

此外，percentualOffset还有一个小问题。虽然它正确地计算了比率，但它没有考虑滚动条高度（导致滚动按钮比滚动条更远）。我更新了，所以它更准确。

调整按钮大小的逻辑也存在轻微问题。如果文档高度大于文档滚动高度（没有滚动条），则事情就会破坏。所以，这个逻辑也被清理了。

你提到你总是想要10px（对于背景图像） - 我添加了填充来解决这个问题（我推荐） - 它在计算按钮的偏移量时简化了逻辑。

希望这有帮助！我看到你可以探索的另一个领域是能够点击并拖动滚动按钮滚动实际页面 - 这很光滑！

如何创建自定义滚动条以垂直滚动文档？

1 个答案: