Chrome爲滾動條保留空間，即使它隱藏了

我已經遇到了webkit瀏覽器（IE和FF都可以）的問題，即使滾動條未顯示，滾動條空間也是爲元素保留的。您可以在示例中看到，一旦中間一個被徘徊，滾動條空間仍保留。我只是想知道這是Chrome的問題還是HTML/CSS規範的一部分。這種類似的question提供了一個修復程序，但它不能解釋它是否是一個錯誤，並且不得不爲兒童設置一個明確的寬度並不是我想要做的。Chrome爲滾動條保留空間，即使它隱藏了

 .hidden-scroll { 
 
      background: black; 
 
      overflow-y: hidden; 
 
      height: 400px; 
 
      width: 300px; 
 
     } 
 

 
     .hidden-scroll:hover { 
 
      overflow-y: auto; 
 
     } 
 

 
     .no-hover.hidden-scroll:hover { 
 
      overflow-y: hidden; 
 
     } 
 

 
     .hidden-scroll-content { 
 
      background: red; 
 
      height: 50px; 
 
     }

<body> 
 
<div>No scroll needed</div> 
 

 

 
<div class="hidden-scroll"> 
 
    <div class="hidden-scroll-content">1</div> 
 
    <div class="hidden-scroll-content">2</div> 
 
    <div class="hidden-scroll-content">3</div> 
 
    <div class="hidden-scroll-content">4</div> 
 
</div> 
 

 
<div>Scroll on hover</div> 
 

 
<div class="hidden-scroll"> 
 
    <div class="hidden-scroll-content">1</div> 
 
    <div class="hidden-scroll-content">2</div> 
 
    <div class="hidden-scroll-content">3</div> 
 
    <div class="hidden-scroll-content">4</div> 
 
    <div class="hidden-scroll-content">5</div> 
 
    <div class="hidden-scroll-content">6</div> 
 
    <div class="hidden-scroll-content">7</div> 
 
    <div class="hidden-scroll-content">8</div> 
 
    <div class="hidden-scroll-content">9</div> 
 
    <div class="hidden-scroll-content">10</div> 
 
    <div class="hidden-scroll-content">11</div> 
 
    <div class="hidden-scroll-content">12</div> 
 
</div> 
 

 
<div>No scroll on hover</div> 
 

 
<div class="no-hover hidden-scroll"> 
 
    <div class="hidden-scroll-content">1</div> 
 
    <div class="hidden-scroll-content">2</div> 
 
    <div class="hidden-scroll-content">3</div> 
 
    <div class="hidden-scroll-content">4</div> 
 
    <div class="hidden-scroll-content">5</div> 
 
    <div class="hidden-scroll-content">6</div> 
 
    <div class="hidden-scroll-content">7</div> 
 
    <div class="hidden-scroll-content">8</div> 
 
    <div class="hidden-scroll-content">9</div> 
 
    <div class="hidden-scroll-content">10</div> 
 
    <div class="hidden-scroll-content">11</div> 
 
    <div class="hidden-scroll-content">12</div> 
 
</div> 
 

 

 
</body>

來源

2014-09-19 pllee

這可能是在眨眼和Webkit的一個bug。你應該明確地報告這一點。我只在Firefox中測試過，它的行爲正確。我做了一些更多的測試，Chrome似乎只能使用文本正常工作。這是正確的行爲http://jsfiddle.net/650pyaq2/1/ 這是錯誤的行爲http://jsfiddle.net/re4o23zr/ – user3448600 2014-09-19 22:46:00

似乎是一個錯誤，我注意到，項目的寬度重置（爲任意值自動/ 100％）後箱被重繪，並正確地奠定了直到另一個懸停，好了，好一會兒怎麼樣一些黑客入侵？ Hacky demo

.wrapper { 
    height:400px; 
    width:300px; 
    overflow:hidden; 
} 

.wrapper:hover .hidden-scroll { 
    width:300px; 
} 

.wrapper:hover .hidden-scroll div { 
    padding-right:0; 
} 

.hidden-scroll { 
    background: black; 
    overflow-y: auto; 
    overflow-x: hidden; 
    height: 400px; 
    width: 330px; 
} 

.hidden-scroll div { 
    background: red; 
    height: 50px; 
    width: auto; 
    padding-right:30px; 
}

來源

2015-04-28 22:51:43

我也陷入了跟你一樣的情況（我認爲），在這裏我想滾動的能力，但我不想滾動條。我還在可見區域的末端放置了自定義<和>分頁控件以翻閱可滾動區域。所以滾動條只是討厭我。

你可以把滾動條功能，用於給定類：

.class::-webkit-scrollbar { 
    width: 0 !important; 
    height: 0 !important; 
}

沒有高度：0，我所看到的空白區域滾動條的高度，它被吃進的內容。一旦我將這個高度：0添加到這個CSS中，它就消失了，而且事情很好。

希望這會有所幫助。

現在我想看看我是否能找到Edge，IE和Firefox的相同功能。這適用於Chrome和Safari。

來源

2016-08-07 01:56:20

如果您不希望被看到滾動條，試圖（爲我工作）

.class::-webkit-scrollbar { 
display : none; 
}

來源

2017-09-25 08:43:25 Vishnu

Chrome爲滾動條保留空間，即使它隱藏了

回答

相關問題