Tüm sayfa boyunca kaydırma çubuğu gösterilmeden kaydırma yapabilmek istiyorum.
Google Chrome'da öyle:
::-webkit-scrollbar {
display: none;
}
Ancak Mozilla Firefox ve Internet Explorer bu şekilde çalışmıyor gibi görünüyor.
Bunu CSS'de de denedim:
overflow: hidden;
Bu kaydırma çubuğunu gizliyor, ancak daha fazla kaydırma yapamıyorum.
Tüm sayfayı kaydırmaya devam ederken kaydırma çubuğunu kaldırabilmemin bir yolu var mı?
Sadece CSS veya HTML ile, lütfen.
Sadece iyi çalışan bir test.
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
[Working Fiddle][1]
Kaydırma çubuğu genişliği farklı tarayıcılarda farklılık gösterdiğinden, bunu JavaScript ile ele almak daha iyidir. Eğer Element.offsetWidth - Element.clientWidth
yaparsanız, tam kaydırma çubuğu genişliği görünecektir.
[JavaScript Çalışma Kemanı][2]
Pozisyon: mutlak`ı kullanma,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
[Working Fiddle][3]
[JavaScript Working Fiddle][4]
Bu cevaba dayanarak bir basit kaydırma eklentisi oluşturdum.
Kullan:
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>
Bu, kaydırma çubuğunu, kaydırma çubuğu olmayan üst üste binen bir div ile bir şekilde örtüştürmek için bir hiledir:
::-webkit-scrollbar {
display: none;
}
Bu yalnızca WebKit tarayıcıları içindir... Ya da tarayıcıya özel CSS içeriği kullanabilirsiniz (eğer gelecekte varsa). Her tarayıcı kendi çubukları için farklı ve özel bir özelliğe sahip olabilir.
Microsoft Edge kullanımı için: MSDN]2 uyarınca -ms-overflow-style: -ms-autohiding-scrollbar;
veya -ms-overflow-style: none;
kullanın.
Firefox için bir eşdeğer yoktur. Bunu başarmak için bir jQuery eklentisi olmasına rağmen, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html