頂部和底部的水平滾動條

我有一個div，我需要添加第二個滾動條到頂部，以便用戶不必滾動到底部才能水平滾動。

我的div內的數據不盡相同。我試圖找到一種很好的方法來捕獲元素內部的真實寬度，這樣我就可以在鏈接它們時強制虛擬滾動條div的寬度相同。

實際div內的內容是從AJAX調用中獲取的。我試過包括一個寬度爲自動的div/p元素，該元素從AJAX調用中返回並與數據一起使用，以便可以從中獲取寬度並應用於第二個div。問題是，當div/p標籤返回時，它只跨越內容div的可見部分（用邊框測試）。我需要它跨越整個內容div。

對於寬度可變的第二個滾動條，有沒有很好的解決方案？歡迎使用JQuery/Javascript解決方案。

enter image description here

來源

2015-01-15 Kirk Logan

您能否提供一個代碼示例以及一個模擬基本示例（使用繪圖）來顯示預期的最終結果？很難想象你真正想要達到的目標。 – 2015-01-15 16:27:58

也許這有助於https://github.com/dreamerslab/jquery.actual – HerrSerker 2015-01-15 16:35:49

我上傳了一張油漆圖片以幫助澄清。 – 2015-01-15 18:02:20

我想出了這個琴：

http://jsfiddle.net/371g6mfa/

主要是因爲在jQuery的UI滑塊演示來源：http://jqueryui.com/slider/#side-scroll 與另外代碼：

HTML：第一後滑塊（如果你把它放在最上面，會發生一些奇怪的事情

<div class="scroll-bar-wrap ui-widget-content ui-corner-top" id="slider2"> 
    <div class="scroll-bar"></div> 
</div>

JS：

//move things around for slider2 
    slider2 = $('#slider2'); 
    slider2.css({ 
     top: (scrollContent.outerHeight() + slider2.outerHeight() * 2 - 1) * (-1) 
    }); 
    scrollPane.css({ 
     'padding-top': slider2.height() 
    }).height(scrollContent.height() + slider2.height() + 1);

-1和+1只是增加了我想邊界的一些圓形的bug。我希望這個能有一點幫助。你可以開始像給滑塊相同的值和左邊的位置或類似的東西。

來源

2015-01-15 17:45:32 ggzone

頂部和底部的水平滾動條

回答

相關問題