Kaydırma çubuğu için HTML yedeği alanı

Question

İçerik eklendiğinde veya kaldırıldığında taşabilecek bir div var.

Ancak, UI tasarımcısı görünür, ancak etkin olmayan kaydırma çubuğunu istemez (overflow: scroll ile olduğu gibi) ve bir tane eklendiğinde ve kaldırıldığında içerik düzeninin değişmesini istemezler (overflow: auto ile olduğu gibi).

Bu davranışı almanın ve farklı platformlardaki ve tarayıcılardaki farklı kaydırma çubuklarını göz önünde bulundurmanın bir yolu var mı?

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

Answer 1

Belki append alt edecek yumuşak senin sorunun bir div?

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

Answer 2

biri sadece HTML & CSS kullanarak, kaydırma ne kadar kalın bilemez ve böylece (mavi) yer tutucu width bilmiyorum.

Böyle bir görevi komut dosyası kullanarak çözebilirsiniz. Gizli bir kapta bir kaydırma çubuğu zorlayın ve iç ve dış genişliğini ölçün. Kaydırma çubuğu genişliği farkı. Bu genişliği (örneğin CSS olarak) yer tutucu öğesine ayarlayın. Ve zor kısımda, bir kaydırma çubuğu gösterildiğinde bu öğeyi gizleyin.

Bu soruna normal çözüm, istemediğinizdir.

Answer 3

Bunu yapmanın tek yolu, kapsayıcıdaki öğelerin genişliğini sabitlemektir. Ve kaydırma çubuğunun genişliği ile muhafazakar olmanız gerekecek.

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

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