Spazio di riserva HTML per barra di scorrimento

Question

Possiedo un div che può traboccare quando il contenuto viene aggiunto o rimosso.

Tuttavia, il progettista dell'interfaccia utente non desidera una barra di scorrimento visibile ma inattiva (come con overflow: scroll) e non desidera che il layout del contenuto cambi quando ne viene aggiunto uno e rimosso (come con overflow: auto).

C'è un modo per ottenere questo comportamento e considerando le diverse barre di scorrimento su piattaforme e browser diversi.

https://jsfiddle.net/qy9a2r00/1/

Answer 1

Forse append un div in fondo sarà morbido il tuo problema? Non

https://jsfiddle.net/moongod101/k7w574mw/1/

Answer 2

si può sapere quanto spesso la barra di scorrimento è, utilizzando solo HTML & CSS e quindi non si conosce il width del (blu) segnaposto.

È possibile risolvere tale attività utilizzando lo scripting. Forza una barra di scorrimento in un contenitore nascosto e misura la larghezza interna ed esterna. La differenza è la larghezza della barra di scorrimento. Imposta questa larghezza (ad es. Come CSS) sull'elemento segnaposto. E nella parte difficile nascondere questo elemento ogni volta che viene mostrata una barra di scorrimento.

La solita soluzione a questo problema è quella che non si desidera.

Answer 3

L'unico modo per fare ciò è di rendere fissa la larghezza degli articoli nel contenitore. E dovrai essere prudente con la larghezza della barra di scorrimento.

.container { 
     width: 200px; 
     height: 200px; 
     overflow: auto; 
     overflow-x: hidden; 
     border: 1px solid black; 
    } 
    .item { 
     width: 200px; 
... 

https://jsfiddle.net/fr1jnmn6/1/