横型オーバーフロースライドパネル

Question

私は、WebアニメーションのためのアニメーションGUIに取り組んでおり、このように側にタイムラインエリアのスライド側を持っていると思っています：http://visjs.org/examples/timeline/basicUsage.html

私は0の開始時間を持っているので、我々は必要ありません。マイナスの時間にスライドすることができますが、ズームインして横方向にスライドしてタイムライン全体を見ることができるようにしたいと考えています。

私はoverflow-x：scrollを調べましたが、期待通りに動作していないようです。

ここが問題です。このページをご覧ください：http://imaginarytools.com/。タイムラインが画面の右側に表示されていることがわかります。背景の灰色が画面の右端で終了することがわかります。右にスクロールすると、ルーラーの背景に灰色の背景がありません。なぜなら、あなたがそれを点検する際、タイムラインヘッダーのdivは、次のようになりますタイムラインを構築するために実行されるJavaScriptのの、

<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 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

同様の問題を抱えている人は、ブートストラップではコンテナの実際の幅を取得できないという問題がありました。私はそれでブートストラップ・スタイリングを取り除き、その後、私がルーラーに目盛りを置くために使っていたのと同じ変数を使って幅を設定しました。

また、コンテンツを水平方向にスクロールするには、このプラグインを使用しました。このプラグインは、コンテナ内のマウス位置のJavaScript計算に他の変更を加えることなく、ほぼシームレスに機能しました。 http://manos.malihu.gr/jquery-custom-content-scroller/

https://github.com/vitch/jScrollPaneのようないくつかの他のものがありましたが、プロジェクトは上記のものと比べて少し古いようです。