Skjul rullefeltet, men fortsatt med mulighet til å bla.

Jeg vil kunne bla gjennom hele siden, men uten at rullefeltet vises.

I Google Chrome er det slik:

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

Men Mozilla Firefox og Internet Explorer ser ikke ut til å fungere slik.

Jeg prøvde også dette i CSS:

overflow: hidden;

Det skjuler rullefeltet, men jeg kan ikke rulle mer.

Finnes det en måte jeg kan fjerne rullefeltet på mens jeg fortsatt kan bla gjennom hele siden?

Med bare CSS eller HTML, takk.

Peter Mortensen
Redigerte spørsmål 10. november 2019 в 11:47
Programmering
internet-explorer firefox google-chrome html css
21. mai 2013 в 1:11
10 visninger
Løsning

Bare en test som fungerer bra.

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

Siden rullefeltbredden varierer i forskjellige nettlesere, er det bedre å håndtere den med JavaScript. Hvis du gjør Element.offsetWidth - Element.clientWidth, vil den nøyaktige rullefeltbredden vises.

[JavaScript Working Fiddle][2] [2].

Eller

Bruke Posisjon: absolutt,

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

Informasjon:

Basert på dette svaret opprettet jeg en enkel scroll-plugin.

Peter Mortensen
Redigert svar 10. november 2019 в 11:49
Kommentarer (23)

Bruk:

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

Dette er et triks for å overlappe rullefeltet noe med en overlappende div som ikke har noen rullefelt:

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

Dette er bare for WebKit-nettlesere... Eller du kan bruke nettleserspesifikt CSS-innhold (hvis det finnes i fremtiden). Hver nettleser kan ha en annen og spesifikk egenskap for sine respektive barer.

For bruk i Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar; eller -ms-overflow-style: none; som per MSDN.

Det finnes ikke noe tilsvarende for Firefox. Selv om det finnes en jQuery-plugin for å oppnå dette, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Peter Mortensen
Redigert svar 5. april 2019 в 2:26
Kommentarer (6)

Legge til

    overflow: -moz-scrollbars-none;

fungerte for meg.

Peter Mortensen
Redigert svar 5. april 2019 в 2:26
Kommentarer (5)