Gizleme HTML bir sayfada kaydırma çubuğu

SORU

21 Temmuz 2010, ÇARŞAMBA

Gizleme HTML bir sayfada kaydırma çubuğu

CSS kaydırma çubuğu gizlemek için kullanılabilir mi? Bunu nasıl yapardın?

CEVAP

1 Kasım 2012, PERŞEMBE

Bütünlüğü hatırına, bu y için çalışır:

#element::-webkit-scrollbar { 
    display: none; 
}

Eğer tüm kaydırma çubukları gizli istiyorsanız, kullanın

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

Geri yükleme hakkında emin değilim - bu işi yaptım, ama bunu yapmak için doğru bir yolu olabilir:

::-webkit-scrollbar { 
    display: block; 
}

Tabii ki her zaman daha kolay width: auto görüş mesafesi bir ince ayar width kötüye hayranı değilim ile geri yüklenebilir width: 0, kullanabilirsiniz.

Eğer geçerli tarayıcı bu destekleyip desteklemediğini görmek için, bu parçacık deneyin:

.content {
  /* These rules create an artificially confined space, so we get 
     a scrollbar that we can hide. They are not part of the hiding itself. */

  border: 1px dashed gray;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content::-webkit-scrollbar { 
  /* This is the magic bit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(Not bu değil gerçekten bir doğru cevap için bir soru olduğu için bunu gizler yatay çubuklar gibi, ama aradığım zaman Google beni buraya çekti, bu kadar iyi olacağını düşündüm sonrası zaten.)

Bunu Paylaş: