Nasıl Yapılır - Kaydırma Çubuğunu Gizle
CSS ile kaydırma çubuklarını nasıl gizleyeceğinizi öğrenin.
Kaydırma Çubukları Nasıl Gizlenir
overflow: hidden;
Hem yatay hem de dikey kaydırma çubuğunu gizlemek için ekleyin .
Örnek
body {
overflow: hidden; /* Hide scrollbars */
}
Yalnızca dikey kaydırma çubuğunu veya yalnızca yatay kaydırma çubuğunu gizlemek için veya overflow-y
kullanın overflow-x
:
Örnek
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
overflow: hidden
Bunun kaydırma çubuğunun işlevselliğini de kaldıracağını unutmayın . Sayfa içinde gezinmek mümkün değildir.
İpucu:overflow
Mülk hakkında daha fazla bilgi edinmek için CSS Taşma Eğitimimize veya CSS Taşma Özellik Referansımıza gidin .
Kaydırma Çubuklarını Gizle Ama İşlevselliği Koru
Kaydırma çubuklarını gizlemek, ancak yine de kaydırmaya devam edebilmek için aşağıdaki kodu kullanabilirsiniz:
Örnek
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Chrome, Safari ve Opera gibi Webkit tarayıcıları, ::-webkit-scrollbar
tarayıcının kaydırma çubuğunun görünümünü değiştirmemize izin veren standart olmayan sözde öğeyi destekler. IE ve Edge -ms-overflow-style:
özelliği destekler ve Firefox scrollbar-width
, kaydırma çubuğunu gizlememize, ancak işlevselliği korumamıza izin veren özelliği destekler.