使用CSS溢出自動隱藏垂直滾動條

我遇到了使用CSS溢出來自動隱藏垂直滾動條的問題。我在一些文章中讀到使用css hover僞類來實現這種行爲，好事是我在某種程度上是成功的。使用CSS溢出自動隱藏垂直滾動條

我使用'scroll'和'auto'作爲overflow-y屬性。使用滾動功能就像魅力一樣，但使用「滾動」時，即使不需要顯示滾動條，問題也是顯而易見的，我覺得「自動」很好。

但是，再次'自動'的問題是有一個16px（我假設）在右側的差距。可能它是滾動條的寬度。我想要全寬。我用背景來解釋我的問題。

div.autoscroll { 
    height: 200px; 
    width: 400px; 
    overflow: hidden; 
    border: 1px solid #444; 
    margin: 3em; 
} 

div.autoscroll:hover { 
    /* overflow-y: scroll; */ 
    overflow-y: auto; 
}

感謝任何幫助。

來源

2013-04-10 Rupam Datta

這實際上似乎是一個瀏覽器錯誤給我，但它似乎工作像你想，如果你懸停時添加padding-right: 1px。

div.myautoscroll:hover { 
    overflow: auto; 
    padding-right: 1px; 
}

http://jsfiddle.net/ExplosionPIlls/9scJE/1/

來源

2013-04-10 05:45:57

謝謝爆炸藥丸。該解決方案爲我工作。我已經在mac，FF中檢查過webkit瀏覽器。我還沒有檢查窗戶。 – 2013-04-10 05:58:22

真棒回答。還要注意：添加'border-right：1px solid gray;'也可以。在我的情況下，我不想添加任何填充，但我可以生活在一個更厚的邊界。 – speedplane 2016-01-03 15:44:28

您可以添加width: 100%;當懸停在DIV：

div.myautoscroll:hover { 
    overflow: auto; 
    width: 100%; 
}

Working Demo

來源

2013-04-10 05:44:02 Eli

您應該補償與填充滾動條。

div.autoscroll:hover { 
    /* overflow-y: scroll; */ 
    overflow-y: scroll; 
padding-right: 16px; 

}

但是最好用javascript來做到這一點，因爲滾動條寬度在瀏覽器之間可能略有不同。我已經成功地使用了這個解決方案：How to calculate the width of the scroll bar?

來源

2013-04-10 05:47:37 Daniel

使用CSS溢出自動隱藏垂直滾動條

回答

相關問題