Горизонтальная Переполнение скольжения панель

Question

Я работаю на GUI анимации для веб-анимации и хотел иметь сторону график область слайда в сторону, как это: http://visjs.org/examples/timeline/basicUsage.html

У меня есть время начала 0, поэтому нам не нужно для скольжения до отрицательных времен, но я хотел бы иметь возможность масштабирования, а затем скользить по бокам, чтобы увидеть всю временную шкалу.

Я просмотрел переполнение-x: прокрутка, но это похоже не работает должным образом.

Вот проблема. Посмотрите эту страницу здесь: 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 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 не позволит вам получить фактическую ширину контейнера. Я закончил удаление стиля бутстрапа на нем, а затем установил ширину, используя те же переменные, которые я использовал, чтобы поместить метки на линейке.

Кроме того, если вы ищете удобный способ прокрутки содержимого по горизонтали, я использовал этот плагин, который работал практически без проблем, без каких-либо изменений в моих вычислениях JavaScript в позиции мыши в контейнере. http://manos.malihu.gr/jquery-custom-content-scroller/

Было еще несколько таких, как этот: https://github.com/vitch/jScrollPane, но проекты казались немного устаревшими по сравнению с приведенным выше.