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

我的想法都快用完了。我试图制作一个侧滚动条来控制整个文档的幻灯片。正如你在我的JSFIDLE上看到的那样，我一直在试验，但无法使其工作。下面是标记和css。您可以在底部的链接中看到更详细的版本。欢迎任何帮助

HTML

---

这里有一个更新的提琴，它解决了评论中的一些问题

首先，这里是小提琴链接：

我想做的事情之一是清理代码，减少单个

up/down

事件处理程序中的重复。相反，我有一个函数

\u scroller

，它将

1/-1

传递给实际的

\u scroll

逻辑

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

正如您所提到的，如果您向下单击，然后将光标从按钮上移开，就会出现一个丑陋的错误。这是由于没有清除间隔。我在另一条评论中提到，您可以设置一个标志并在文档级别进行检查（允许用户将光标从按钮上移开-这对于

MouseEvents

来说感觉更“正确”）。我已经更新了小提琴以使用这种逻辑。感觉好多了

此外，

percentualOffset

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

调整按钮大小的逻辑也有一个小问题。如果文档高度大于文档滚动高度（无滚动条），则会发生故障。因此，这一逻辑也得到了澄清

您提到您希望始终使用10px（用于背景图像）-我添加了填充以解决此问题（我建议使用此选项）-这简化了计算按钮偏移量时的逻辑

---

希望这有帮助！我看到你可以探索的另一个领域是，可以点击并拖动滚动按钮来滚动实际的页面——那太光滑了

实验：你不想用css来做这个？只是一个javascript？将

overflow-y:scroll

添加到要滚动的div的css样式中。不要忘记高度属性。@andrex你认为

overflow-y:scroll

可以使

#sidescroll

工作吗？请看小提琴。嘿，我记得你！因此，如果您还记得前面提到的，您可以调整按钮的大小以匹配视口。这里有一个例子：-独立：是的，这不应该被标记为重复这里有一个可变滚动速度的小提琴：这将有利于较长的页面，你可能不想要一个恒定的速度。

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

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