Želim, da se lahko pomikate po celotni strani, vendar brez prikazane vrstice za pomikanje.
V brskalniku Google Chrome je:
::-webkit-scrollbar {
display: none;
}
Mozilla Firefox in Internet Explorer pa ne delujeta tako.
To sem poskusil tudi v CSS:
overflow: hidden;
To skrije drsno vrstico, vendar se ne morem več pomikati.
Ali obstaja način, kako lahko odstranim drsno vrstico in hkrati še vedno lahko pomikam celotno stran?
Samo s CSS ali HTML, prosim.
Samo test, ki deluje dobro.
#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 */
}
[Delujoča violina][1]
Ker se širina drsne vrstice v različnih brskalnikih razlikuje, jo je bolje obdelati z JavaScriptom. Če naredite Element.offsetWidth - Element.clientWidth
, bo prikazana natančna širina drsne vrstice.
[JavaScript Working Fiddle][2]
Uporaba Position: absolute
,
#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;
}
[Delovna skrinja][3]
[JavaScript Delovna skrinja][4]
Na podlagi tega odgovora sem ustvaril preprost vtičnik za pomikanje.
Uporaba:
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>
To je trik, s katerim nekoliko prekrijete drsno vrstico s prekrivajočim divom, ki nima nobenih drsnih vrstic:
::-webkit-scrollbar {
display: none;
}
To velja samo za brskalnike WebKit... Lahko pa uporabite vsebino CSS, ki je značilna za brskalnik (če bo v prihodnosti obstajala). Vsak brskalnik bi lahko imel drugačno in specifično lastnost za svoje vrstice.
Za brskalnik Microsoft Edge uporabite: Uporabite -ms-overflow-style: -ms-autohiding-scrollbar;
ali -ms-overflow-style: none;
, kot po MSDN.
Za Firefox ni ustreznika. Čeprav obstaja vtičnik jQuery, ki to omogoča, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html