只有垂直滾動條與垂直邊緣的div

我想用一個垂直滾動條在HTML中創建一個列表。我知道如何做到這一點，但我卡住的部分是在溢出元素的邊緣放置溢出元素內的div。只有垂直滾動條與垂直邊緣的div

見下文代碼：

#wrapper {margin: 50px; width: 500px; height: 500px;} 
#scrollable {width: 200px; height: 500px; overflow-y: visible; overflow-x: hidden;} 
.item {clear: left; width: 200px; height: 40px;} 

<body> 
    <div id='wrapper'> 
    <div id='scrollable'> 
     <div class='item'></div> 
     <div class='item'></div> 
    </div> 
    </div> 
</body>

我希望.item元件去5或10個像素以上#scrollable的左邊緣。

任何人都可以告訴我如何做到這一點？

謝謝。

來源

2012-01-13 Michael Bates

這不能做到這樣，這只是溢出是如何工作的，即移出側容器的可見區域的一切變得隱。爲什麼要將其父容器左側的5到10個像素偏移？我只是不確定什麼修復礦石黑客可以做更多關於你爲什麼這樣做的信息。 – einar 2012-01-13 03:04:37

我列出了列表中的一些項目，當選擇其中一個項目時，它將在左邊緣上移動五或十個像素以表示它是活動項目。 – 2012-01-13 04:06:43

因此，正如其他人所說的，您無法將元素顯示在溢出不可見的元素的邊界之外。

但是，假設您只是試圖達到效果，您可以輕鬆完成。一種方法是，如果你的#scrollable元素必須是200px，那麼每個寬度爲012px，寬度爲190px，偏移量爲左邊10px。否則，如果你是.items的寬度必須是200px，那麼使用你的#scrollable元素來補償。然後，在選擇時，將偏移量保留爲0.

我製作了一個JSFiddle。看看（在JS中是沒有必要的，但只是模仿選擇） http://jsfiddle.net/rgthree/tpfLZ/

來源

2012-01-13 17:07:36 rgthree

在#wrapper中，添加：overflow：visible;
在#scrollable中，添加：margin-left：-10px; （您可能需要設置寬度：210px以進行補償）

測試以確保它符合您的要求。（請注意，這將使項目> 200px被切斷到右側）

來源

2012-01-13 00:56:22 Hope4You

這只是推動.item元素在#scrollable元素下留下10個像素。 – 2012-01-13 01:03:19

您是否添加了溢出：對#wrapper可見？當我複製並粘貼你給我的代碼時，它可以正常工作（Safari 5）。 – Hope4You 2012-01-13 01:08:30

包裝滾動？我想要的最好方法就是不要在包裝上滾動。 – 2012-01-13 01:15:15

只有垂直滾動條與垂直邊緣的div

回答

相關問題