如何使固定側欄在主滾動條中滾動而不引入其他滾動條？

我有以下樣式如何使固定側欄在主滾動條中滾動而不引入其他滾動條？

.side-bar{ 
    overflow: auto; 
    position: fixed; 
}

眼下，因爲這欄是比屏幕垂直長度越長，側欄，瀏覽器引入了另一個垂直滾動旁邊的側欄。

這並不理想。

有沒有一種方法來控制主要內容和邊欄與相同的垂直滾動？

來源

2016-08-04 testing

一種方法是定義側邊欄的寬度，或者如果它是直接在身體內部，則使用寬度：100％並溢出：隱藏 –

如果您的意圖是使用主滾動條滾動側欄和主頁頁面，爲什麼要引入一個div特定的滾動條（使用overflow：auto）開始？如果你想div與頁面一起滾動，你爲什麼使用position：fixed？你能完全描述你的行爲嗎？你是否要求主滾動條同時滾動頁面和div？或者你認爲主滾動條會在某些時間和部分時間滾動主頁面？如果是後者，瀏覽器將如何知道用戶想要哪些內容？ –

@RandallStewart我想在屏幕邊上固定一個側欄，但側欄比瀏覽器的長度更長，所以我希望它可以滾動，但我不想引入另一個滾動條來控制側欄，而是讓主滾動條滾動固定側欄和內容。 – testing

你可以看看這是否是你正在尋找的效果？爲簡單起見，它僅顯示1個元素（一個div），用作右側固定條。此設置爲您提供了一個滾動條，但滾動條僅屬於div。頁面本體不可滾動，因此如果主體內容太多，則溢出將不可見。

要測試下面的小樣本，您需要將一堆文本添加到div以強制其垂直展開。

<html> 
 

 
<head> 
 
    <style> 
 
    body { 
 
     overflow: hidden; 
 
     height: 100%; 
 
     border: dotted 1px #00ff00; 
 
    } 
 
    div { 
 
     float:right; 
 
     margin: 0 0 0 2em; 
 
     max-height: 100%; 
 
     overflow: auto; 
 
     width: 5em; 
 
     border: dotted 1px #ff0000; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div> 
 
    This is the scrollable side bar. Add a bunch of text here to force the height to expand. 
 
    </div> 
 

 
    This is the main body. If you add a bunch of text here, you'll see how the overflow is cut off and a 2nd scroll bar does not appear. 
 
</body> 
 

 
</html>

這裏是CSS的解釋...

主體元素

溢出：隱藏出現在主防止滾動條頁。
身高：100％設置身高以匹配窗口高度。
border：dotted 1px＃00ff00僅添加以更清楚地顯示身體元素的周長。

div元素

浮動：權移到格到頁面的右上角。你也可以使用固定的位置，但是這樣可以保持主體內容不會在div下流動。
保證金：0 0 0 2em讓div的身體內容過於接近。
最大高度：100％確保酒吧不能展開超過窗口的高度，迫使滾動條顯示
溢出：汽車導致DIV顯示滾動條時，DIV含量超過在div高度
寬度：5em的從填充所述窗口
邊界的整個寬度防止在div：點綴1px的＃FF0000顯示div的邊界

編輯：上面的原始CSS工作在怪癖模式，但滾動條無法出現與HTML5文檔類型。解決的辦法是使用固定位置而不是浮動。或者在側欄div上設置絕對高度（而不是身高的百分比），以便側欄的高度不依賴於身體元素的高度。

我認爲問題是這樣的：body元素有一個「隱藏」的溢出來防止滾動條出現。但是，如果元素溢出而不是可見，則會根據需要垂直擴展以包含任何浮動內容。因此，側欄div上的「max-height：100％」是沒有意義的，因爲body元素會擴展到div所需的任何高度。在div上使用固定位置可防止身體無限制地展開以包含浮動元素。或者，使用絕對div高度，即使body元素不能，也會限制浮動div的高度。

來源

2016-08-04 23:03:40

感謝您的回答，我在[plunker]（https://plnkr.co/edit/yzH0jlPYTVowwpKxOG31?p=preview）中使用了相同的樣式，但是我發現內容和邊欄都沒有滾動條 – testing

如何使固定側欄在主滾動條中滾動而不引入其他滾動條？

回答

相關問題