javascript - 横向溢出滑动面板

Question

我正在为网络动画制作动画 GUI，并希望时间线区域像这样左右滑动:http://visjs.org/examples/timeline/basicUsage.html

我的开始时间为 0，因此我们不需要滑动到负时间，但我希望能够放大然后左右滑动以查看整个时间轴。

我查看了 overflow-x: scroll，但它似乎没有按预期工作。

问题来了。在此处查看此页面:http://imaginarytools.com/ .您可以看到时间线向右离开屏幕，现在请注意背景灰色刚好向右离开屏幕，因此如果您向右滚动，则标尺后面没有灰色背景。

我有这样的时间表:

<div class="col-md-10 m-0 p-0 timeline-right-panel">
  <div class="col-md-12 scrubberHandle m-0 p-0">
    <i class="fa fa-chevron-down scrubber-icon"></i>
  </div>
  <div class="col-md-12  m-0 p-0 timeline-container timeline-container-header">
    <div id="timeSlider" class="col-md-12 m-0 p-0"></div>
    <div class="col-md-12  m-0 p-0 timelineTicks timelineNumbers timelinePositioning"></div>
  </div>
  <div class="col-md-12  m-0 p-0 timelineTimingPanel"></div>
</div>

当您呈现页面时，由于运行 javascript 来构建时间线，所以当您检查它时，timeline-header div 看起来像这样:

<div class="col-md-12  m-0 p-0 timeline-container timeline-container-header" style="width: 2110px;">
  <div id="timeSlider" class="col-md-12 m-0 p-0"></div>
  <div class="col-md-12  m-0 p-0 timelineTicks timelineNumbers timelinePositioning">
    <span class="minorTick" style="position:absolute;width:2px;height:10px;left:8px;">|</span>
    <span class="minorTick" style="position:absolute;width:2px;height:10px;left:12px;">|</span>
  </div>
</div>

特别注意它是怎么说的 style="width: 2110px;" 我已经尝试了所有我能找到的方法来获得实际宽度，但我得到的只是部分的宽度灰色背景。宽度由标尺上的 500 个刻度线和它们的位置控制，这些刻度线拉伸(stretch)外部容器以适应，但我不明白为什么我不能使用类似的东西获得容器的实际宽度:

$(".timeline-container").width()
$(".timeline-container").outerWidth()

是不是涉及bootstrap的问题？我正在尝试获取宽度，以便我可以将其下方容器的宽度设置为匹配，因为空间中包含可拖动的元素。我很想把它变成一个滑动时间线，就像从 visjs 链接的那样，但事实上我似乎无法理解这个基本部分。

获取此容器的宽度有什么技巧吗？

Answer 1

对于遇到类似问题的其他人，问题是 Bootstrap 不允许您获取容器的实际宽度。我最终删除了它的 Bootstrap 样式，然后使用我用来在标尺上定位刻度线的相同变量设置宽度。

此外，如果您正在寻找一种水平滚动内容的好方法，我使用了这个插件，它几乎可以无缝运行，而无需对容器中鼠标位置的 JavaScript 计算进行任何其他修改。 http://manos.malihu.gr/jquery-custom-content-scroller/

还有几个像这样的:https://github.com/vitch/jScrollPane , 但与上面的元素相比，这些元素似乎有点过时了。