顶部和底部水平滚动条

Question

我一直在寻找几天来解决这个问题。

我有一个div，我需要在顶部添加第二个滚动条，这样用户就不必滚动到底部以便水平滚动。

我的div中的数据变化很多。我试图找到一个很好的方法来捕捉元素内部的真正宽度，这样当我链接它时，我可以强制虚拟滚动条div的宽度相同。

实际div中的内容是从AJAX调用中获取的。我尝试包含一个宽度为auto的div / p元素，它从AJAX调用返回以及数据，以便有一个单元素，我可以从中获取宽度并应用于我的第二个div。问题是，当返回div / p标记时，它只跨越内容div的可见部分（用边框测试）。我需要它来跨越整个内容div。

对于具有可变宽度内容的第二个滚动条，它们有什么好的解决方案吗？欢迎使用JQuery / Javascript解决方案。

Answer 1

我想出了这个小提琴：

http://jsfiddle.net/371g6mfa/

基本上是来自http://jqueryui.com/slider/#side-scroll的jquery-ui滑块演示 另外还有代码：

HTML：在第一个滑块之后（如果你把它放在顶部，会发生一些奇怪的事情

<div class="scroll-bar-wrap ui-widget-content ui-corner-top" id="slider2">
    <div class="scroll-bar"></div>
</div>

JS：

//move things around for slider2
     slider2 = $('#slider2');
     slider2.css({
         top: (scrollContent.outerHeight() + slider2.outerHeight() * 2 - 1) * (-1)
     });
     scrollPane.css({
         'padding-top': slider2.height()
     }).height(scrollContent.height() + slider2.height() + 1);

我猜想只为边界的一些圆形错误添加了-1和+1。我希望这能有所帮助。你可以开始给滑块提供相同的值和左边的位置等等。