Chrome（windows）不隱藏滾動條

我有這個可滾動的div，當我不滾動時（在我的Mac中的Chrome）隱藏滾動條。但在Windows 8上，它在Chrome和Firefox中不起作用。Chrome（windows）不隱藏滾動條

IE不支持這種過，但我一直在使用下面的CSS使它：

-ms-overflow-style: -ms-autohiding-scrollbar;

有什麼辦法使這種行爲的Chrome和Firefox

這裏是一個jsfiddle

來源

2014-07-23 Jeanluca Scaljeri

也許你可以使用類似的東西？

body { 
    margin:0; 
    padding:0; 
    overflow-y: hidden; 

} 
body:hover { 
    overflow-y: scroll; 
}

http://jsfiddle.net/4RSbp/165/

來源

2014-07-23 13:31:44

不錯的特克斯男人:) –

這感覺偷偷摸摸，但我喜歡它。確實是我想要的。 – jcaruso

這是否會導致無障礙問題？ – phk

滾動條隱藏在您的Mac上，因爲這是系統首選項（系統偏好設置>常規>顯示滾動條）。不幸的是，Firefox或Chrome沒有-ms-overflow-style的版本。

來源

2014-07-23 13:10:49 marcelo2605

對於正在添加的人在這裏，如果你想隱藏在一個跨瀏覽器跨系統的方式滾動條和保持滾動性，而不鼠標渲染的視覺毛刺啓用;將它們隱藏在容器的極限之下是一種好方法。（注意，這將會很長）

假設你有一個可滾動的容器，並且你想要隱藏垂直滾動條（即使是現代系統顯示的薄透明的容器）。它的ID是#scrollable：

<html> 
[...] 
<div id="scrollable">Some Y large content</div> 
[...] 
</html>

爲了實現我們想要的，#scrollable必須由專門的節點包含了它（一個div會的工作，在這個例子＃滾動覆蓋），我們必須知道#scrollable佈局寬度和高度。可以說它將是一個800px x 900px的區域。因此，我們得到：

<html> 
[...] 
<div id="scrollable-cover"> 
<div id="scrollable">Some Y large content</div> 
</div> 
[...] 
</html>

而其CSS：

#scrollable-cover { 
width: 800px; 
height: 900px; 
overflow: hidden 
} 
#scrollable { 
width: 820px; 
height: 100%; 
overflow: scroll; 
}

就這樣，#scrollable將被拉伸到其inmediate家長的高度（＃滾動覆蓋）和其龐大的內容將使它像一個可滾動的框，但是，由於它的寬度比其父母具有'overflow：hidden'屬性大20px，所以滾動條將不會顯示，因爲它在隱藏在#scrollable右側的20px上呈現。

這使我們很不方便，#scrollable的內容也可能在該隱藏的20px寬度區域中呈現;爲了避免這種情況，有兩種方法。一個是爲包裝#scrollable的所有內容在一個＃可滾動的包裝與800像素的寬度和高度自動：

<html> 

[...] 

<style> 
#scrollable-cover { 
width: 800px; 
height: 900px; 
overflow: hidden 
} 
#scrollable { 
width: 820px; 
height: 100%; 
overflow: scroll; 
} 
#scrollable-wrapper { 
width: 800px; 
height: auto; 
} 
</style> 

[...] 

<div id="scrollable-cover"> 
<div id="scrollable"> 
    <div id="scrollable-wrapper">Some Y large content</div> 
</div> 
</div> 

[...] 

</html>

這樣，所有內容將在我們的滾動箱內800像素寬度的佈局呈現。但是，如果你不希望添加其他元素，你可以用二 CSS唯一的選擇解決這個問題，採用箱大小在正確的一個20像素的填充：

#scrollable-cover { 
width: 800px; 
height: 900px; 
overflow: hidden 
} 
#scrollable { 
width: 820px; 
height: 100%; 
overflow: scroll; 
padding-right: 20px 
box-sizing: border-box; 
}

這樣一來，任何內部＃呈現可滾動將避免右側20px的隱藏區域，'box-sizing：border-box'會告訴瀏覽器在#scrollable的總共820px寬度中包含20px的填充（否則，它將增長到計算總計840px）。這裏檢查框大小的兼容性：http://caniuse.com/#search=box-sizing

當然，這個例子也可以使用水平滾動，只是增加#scrollable 20px的高度，使其高於其中間父級的高度。這是線索;）

來源

2016-11-18 18:26:05

Chrome（windows）不隱藏滾動條

回答

相關問題