Chrome riserva spazio per la barra di scorrimento anche se è nascosta

Ho incontrato un problema sui browser webkit (IE e FF sono ok) dove lo spazio della barra di scorrimento è riservato per un elemento anche se la barra di scorrimento non viene visualizzata. Puoi vedere nell'esempio che una volta che il middle è al passaggio del mouse lo spazio della barra di scorrimento è ancora riservato. Mi sto solo chiedendo se questo è un problema con Chrome o solo parte delle specifiche HTML/CSS. Questo simile question fornisce una correzione ma non spiega se si tratta di un bug o meno e dover impostare una larghezza esplicita sui bambini non è ciò che voglio fare.Chrome riserva spazio per la barra di scorrimento anche se è nascosta

 .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>

fonte

2014-09-19 pllee

Questo potrebbe essere un bug nel Blink & Webkit. Dovresti sicuramente riferire questo. Ho provato solo in Firefox e si comporta correttamente. Ho fatto qualche altro test e Chrome sembra funzionare correttamente solo con il testo. Questo comportamento è corretto http://jsfiddle.net/650pyaq2/1/ Questo comportamento è errato http://jsfiddle.net/re4o23zr/ – user3448600

Sembra come un insetto, ho notato che dopo il ripristino larghezza dell'articolo (a qualsiasi valore auto/100%) di dialogo viene ridisegnato e disposti in modo corretto finché un altro passaggio del mouse, beh, per un attimo che ne dici di qualche hack hacky? 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; 
}

fonte

2015-04-28 22:51:43

stavo correndo in una situazione come la tua (credo), dove volevo la capacità di scorrimento, ma non volevo barre di scorrimento. Ho anche inserito i comandi personalizzati < e> paging alle estremità delle aree visibili per sfogliare l'area scorrevole. Quindi le barre di scorrimento mi stavano solo annoiando.

È possibile attivare le barre di scorrimento fuori per una data classe con:

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

senza l'altezza: 0, vedevo un'area vuota l'altezza della barra di scorrimento e mangiavo nel contenuto. Una volta ho aggiunto l'altezza: 0 in questo CSS è andato via e le cose vanno bene.

Spero che questo aiuti.

Ora sono fuori per vedere se riesco a trovare la stessa cosa per Edge, IE e Firefox. Funziona su Chrome e Safari.

fonte

2016-08-07 01:56:20

Se non si desidera che la barra di scorrimento da vedere, provare (ha lavorato per me)

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

fonte

2017-09-25 08:43:25 Vishnu

Chrome riserva spazio per la barra di scorrimento anche se è nascosta

risposta

Problemi correlati