2014-09-19 38 views
10

我已經遇到了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>

+1

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

回答

0

似乎是一個錯誤,我注意到,項目的寬度重置(爲任意值自動/ 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; 
} 
0

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

你可以把滾動條功能,用於給定類:

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

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

希望這會有所幫助。

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

0

如果您不希望被看到滾動條,試圖(爲我工作)

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