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

-1

我在这里想法不多了。我正在尝试使侧滚动条来控制整个文档的幻灯片。正如你可以在我的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/

来源

2014-09-19 Vinicius Santana

试验： http://jsfiddle.net/vinicius5581/2y63xnxa/5/ – 2014-09-19 23:06:10

你不想为此使用css？只是一个JavaScript？将'overflow-y：scroll'添加到要滚动的div的CSS样式中。 Adn不要忘记高度属性。 – andrex 2014-09-19 23:13:36

@andrex你认为'overflow-y：scroll'能使'＃sidescroll'工作吗？请观看小提琴。 – 2014-09-19 23:15:46

这里有一个更新的小提琴，解决了几个从评论的问题。

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

一个我想做的一件事是清理代码，并从之前降低个别up/down事件处理程序的重复。相反，我有一个功能_scroller，然后将1/-1传递给实际的_scroll逻辑。

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

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

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

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

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

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

来源

2014-09-22 07:48:08 Jack

这是一个可变滚动速度的小提琴：http://jsfiddle.net/dLbbntwz/5/这将是较长的页面，你可能不想要一个恒定的速度很好。 – Jack 2014-09-22 08:34:26

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

回答

相关问题