水平溢出滑動面板

我工作的一個動畫圖形用戶界面的網絡動畫，並希望有時間線區域滑動一邊到另一邊是這樣的：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>

當你渲染頁面，因爲在運行時，你檢查它來建立時間軸時間軸頭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()

是否存在bootstrap問題？我正在嘗試獲取寬度，以便我可以將容器的寬度設置爲與之匹配，因爲空間中包含可拖動的元素。我很樂意將它製作成滑動時間線，就像從visjs鏈接的時間線一樣，但是因爲我似乎無法得到這個基本部分。

獲取此容器寬度的任何技巧？

來源

2017-01-28 Alan

我發現它似乎是一個引導問題。刪除這些元素的引導樣式讓我做我想做的事。 – Alan

對於任何有類似問題的人來說，問題是Bootstrap不允許你獲得容器的實際寬度。我最終刪除了引導樣式，然後使用我用來在刻度上定位刻度線的相同變量來設置寬度。另外，如果您正在尋找一種水平滾動內容的好方法，我使用了幾乎無縫工作的插件，無需對容器中鼠標位置的JavaScript計算進行任何其他修改。 http://manos.malihu.gr/jquery-custom-content-scroller/

有一些像這樣的其他人：https://github.com/vitch/jScrollPane，但項目似乎有點過時，與上述相比。

來源

2017-01-30 16:07:47 Alan

水平溢出滑動面板

回答

相關問題