Question

我正在制作一个用于网页动画的动画图形用户界面，并希望让时间轴区域像这样左右滑动：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来构建时间轴，因此当您检查时，时间轴标题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个刻度标记和它们的位置控制，它们伸展外部容器以适应，但我无法弄清楚为什么我无法使用以下内容获取容器的实际宽度：

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

是否涉及引导程序的问题？我试图获得宽度，所以我可以设置容器的宽度，以便匹配，因为空间中包含可拖动的元素。我很想把它变成一个像visjs链接的滑动时间线，但是因为它似乎无法让这个基本部分失效。

获取此容器宽度的任何技巧？

Answer 1

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

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

还有其他几个像这样的人：https://github.com/vitch/jScrollPane，但与上面的项目相比，项目似乎有点过时了。

水平溢流滑动面板

1 个答案: