顶部和底部水平滚动条

Question

我这几天一直在寻找解决这个问题的好方法。

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

我的 div 中的数据变化很大。我正在尝试找到一种捕捉元素内部真实宽度的好方法，以便在链接它们时强制虚拟滚动条 div 的宽度相同。

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

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

Answer 1

我想出了这个小提琴：

http://jsfiddle.net/371g6mfa/

基本上它的 jquery-ui 滑块演示来自：http://jqueryui.com/slider/#side-scroll 附加代码：

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 只是为一些边框的圆形错误添加的。我希望这能有所帮助。您可以开始为滑块赋予相同的值和左侧位置或类似的东西。