Verberg scroll bar, maar terwijl je nog steeds kan scrollen

Ik wil door de hele pagina kunnen scrollen, maar zonder dat de scrollbar wordt getoond.

In Google Chrome is het zo's:

::-webkit-scrollbar {
    display: none;
}

Maar Mozilla Firefox en Internet Explorer schijnen niet zo te werken.

Ik heb dit ook geprobeerd in CSS:

overflow: hidden;

Dat verbergt wel de scrollbar, maar ik kan niet meer'scrollen.

Is er een manier waarop ik de scrollbar kan verwijderen terwijl ik nog steeds de hele pagina kan scrollen?

Met alleen CSS of HTML, graag.

Peter Mortensen
Bewerkte vraag 10de6 november 2019 в 11:47
Programmering
internet-explorer firefox google-chrome html css
21ste1 mei 2013 в 1:11
27 views
Oplossing

Gewoon een test die goed werkt.

#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]

JavaScript:

Omdat de scrollbarbreedte in verschillende browsers verschilt, is het beter om dit met JavaScript af te handelen. Als je Element.offsetWidth - Element.clientWidth doet, krijg je de exacte scrollbarbreedte te zien.

[JavaScript Werken Fiddle][2]

Of

Gebruik 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;
}

[Working Fiddle][3]

[JavaScript Working Fiddle][4]

Informatie:

Op basis van dit antwoord heb ik een eenvoudige scroll plugin gemaakt.

Peter Mortensen
Bewerkt antwoord 10de6 november 2019 в 11:49
Commentaren (23)

Gebruik:

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

Dit is een truc om de scrollbar enigszins te laten overlappen met een overlappende div die'geen scrollbars heeft:

::-webkit-scrollbar {
    display: none;
}

Dit is alleen voor WebKit browsers... Of je zou browser-specifieke CSS-inhoud kunnen gebruiken (als die er in de toekomst is). Elke browser zou een andere en specifieke eigenschap kunnen hebben voor hun respectievelijke balken.

Voor Microsoft Edge gebruik je: -ms-overflow-style: -ms-autohiding-scrollbar; of -ms-overflow-style: none; zoals per MSDN.

Er is geen equivalent voor Firefox. Hoewel er een jQuery plugin is om dit te bereiken, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Peter Mortensen
Bewerkt antwoord 5de4 april 2019 в 2:26
Commentaren (6)

Toevoegen

    overflow: -moz-scrollbars-none;

werkte voor mij.

Peter Mortensen
Bewerkt antwoord 5de4 april 2019 в 2:26
Commentaren (5)