javascript - 顶部和底部水平滚动条

Question

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

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

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

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

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

Answer 1

我想到了这个 fiddle :

http://jsfiddle.net/371g6mfa/

基本上是 jquery-ui slider 演示，来自:http://jqueryui.com/slider/#side-scroll附加代码:

HTML:在第一个 slider 之后(如果将其放在顶部，会发生一些奇怪的事情

<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 只是为边界的一些圆形错误添加的，我猜。我希望这个能有一点帮助。您可以开始一些事情，例如为 slider 提供相同的值和左侧位置或类似的东西。