Kaydırma çubuğunu nasıl gizlerim
- Önceki sayfa özelleştirilmiş kaydırma çubuğu
- Sonraki sayfa gösterme/zorla gösterme kaydırma çubuğu
CSS ile kaydırma çubuğunu gizlemeyi öğrenin.
Kaydırma çubuğunu nasıl gizlerim
Ekleme overflow: hidden;kullanabilirsiniz, hem dikey hem de yatay kaydırma çubuklarını gizleyebilir.
Örnek
body {
overflow: hidden; /* Kaydırma çubuklarını gizle */
}
Yalnızca dikey kaydırma çubuğunu veya yalnızca yatay kaydırma çubuğunu gizlemek için overflow-y veya overflow-x:
Örnek
body {
overflow-y: hidden; /* Dikey kaydırma çubuğunu gizle */
overflow-x: hidden; /* Yatay kaydırma çubuğunu gizle */
}
Lütfen dikkat edin:overflow:hidden Ayrıca, kaydırma çubuğunun işlevini de silecektir. Sayfa içinde kaydırma yapılamaz.
Kaydırma çubuğunu gizleyin ancak işlevi koruyun
Kaydırma çubuğunu gizlemek ve yine de kaydırmaya devam etmek için aşağıdaki kodu kullanabilirsiniz:
Örnek
/* Chrome, Safari ve Opera için kaydırma çubuğunu gizle */
.example::-webkit-scrollbar {
display: none;
}
/* IE, Edge ve Firefox için kaydırma çubuğunu gizle */
.example {
-ms-overflow-style: none; /* IE ve Edge */
scrollbar-width: none; /* Firefox */
}
Webkit tarayıcıları (Chrome, Safari ve Opera gibi) standart dışı ::-webkit-scrollbar yalan eleman, tarayıcı kaydırma çubuğunun görünümünü değiştirmemizi sağlar. IE ve Edge tarafından desteklenir -ms-overflow-style: öznitelik, Firefox tarafından desteklenir scrollbar-width Bu özellikler, kaydırma çubuğunu gizlememize ve işlevini korumamıza olanak tanır.
İlgili sayfalar
Kılavuz:CSS aşırı
Referans el kitabı:CSS overflow özelliği
- Önceki sayfa özelleştirilmiş kaydırma çubuğu
- Sonraki sayfa gösterme/zorla gösterme kaydırma çubuğu
