Jeg vil gerne kunne rulle gennem hele siden, men uden at scrollbjælken vises.
I Google Chrome er det:
::-webkit-scrollbar {
display: none;
}
Men Mozilla Firefox og Internet Explorer ser ikke ud til at fungere sådan.
Jeg har også prøvet dette i CSS:
overflow: hidden;
Det skjuler scrollbaren, men jeg kan ikke scrolle mere.
Er der en måde, hvorpå jeg kan fjerne rullebjælken, mens jeg stadig kan rulle hele siden?
Med bare CSS eller HTML, tak.
Det er bare en test, som fungerer fint.
#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]
Da bredden af rullebjælken er forskellig i forskellige browsere, er det bedre at håndtere det med JavaScript. Hvis du laver Element.offsetWidth - Element.clientWidth
, vil den nøjagtige rullebjælkebredde blive vist.
[JavaScript Working Fiddle][2]
Brug af Position: absolut
,
#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]
Baseret på dette svar har jeg lavet et simpelt scroll-plugin.
Anvendelse:
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>
Dette er et trick til at overlappe rullebjælken med en overlappende div, som ikke har nogen rullebjælker:
::-webkit-scrollbar {
display: none;
}
Dette er kun for WebKit browsere... Eller du kan bruge browser-specifikt CSS-indhold (hvis der er noget i fremtiden). Hver browser kunne have en anden og specifik egenskab for deres respektive barer.
For Microsoft Edge brug: For Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar;
eller -ms-overflow-style: none;
som per MSDN.
Der findes ikke noget tilsvarende for Firefox. Selv om der findes et jQuery-plugin til at opnå dette, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html