Jak ukryć pasek przewijania w przeglądarce Firefox?

Właśnie dowiedziałem się, jak ukryć pasek przewijania w Google Chrome, zrobiłem to z tym kodem:

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

Jedynym problemem jest to, że to nie działa w przeglądarce Firefox. Wypróbowałem wiele sposobów, ale nadal nie działa.

Możesz użyć scrollbar-widthreguły. Możesz scrollbar-width: none;ukryć pasek przewijania w przeglądarce Firefox i nadal mieć możliwość swobodnego przewijania.

body {
   scrollbar-width: none;
}

Aby ukryć pasek przewijania w Chrome, Firefox i IE, możesz użyć tego:

.hide-scrollbar
{
    overflow: auto;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
}

Udało mi się ukryć pasek przewijania, ale nadal mogę przewijać kółkiem myszy dzięki temu rozwiązaniu:

html {overflow: -moz-scrollbars-none;}

Pobierz wtyczkę https://github.com/brandonaaron/jquery-mousewheel i dołącz tę funkcję:

jQuery('html,body').bind('mousewheel', function(event) {
    event.preventDefault();
    var scrollTop = this.scrollTop;
    this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
    //console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
  });

To jest to, czego potrzebowałem, aby wyłączyć paski przewijania, zachowując przewijanie w Firefoksie, Chrome i Edge w:

          @-moz-document url-prefix() { /* Disable scrollbar Firefox */
            html{
              scrollbar-width: none;
            }
          }
          body {
            margin: 0; /* remove default margin */
            scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
            -ms-overflow-style: none;  /* Disable scrollbar IE 10+ */
            overflow-y: scroll;
          }
          body::-webkit-scrollbar {
            width: 0px;
            background: transparent; /* Disable scrollbar Chrome/Safari/Webkit */
          }

W przypadku zestawu internetowego użyj następujących elementów:

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

W przypadku przeglądarki Mozilla Firefox użyj następującego kodu:

@-moz-document url-prefix() {
    html,body{overflow: hidden !important;}
}

a jeśli przewijanie nie działa, dodaj

element {overflow-y: scroll;}

do określonego elementu

To jest coś w rodzaju ogólnego rozwiązania:

<div class="outer">
 <div class="inner">
    Some content...
 </div>
</div>

<style>
 .outer {
 overflow: hidden;
}
 .inner {
 margin-right: -16px;
 overflow-y: scroll;
 overflow-x: hidden;
}
</style>

Pasek przewijania jest ukryty przez nadrzędny element DIV.

Wymaga to użycia overflow: hidden w nadrzędnym div.

W nowszych wersjach Firefoksa stare rozwiązania już nie działają, ale z powodzeniem zastosowałem w wersji 66.0.3 scrollbar-colorwłaściwość, którą możesz ustawić transparent transparenti która sprawi, że pasek przewijania w Firefoksie na pulpicie będzie przynajmniej niewidoczny (nadal ma miejsce w widoczny obszar i na urządzeniach mobilnych nie działa, ale pasek przewijania jest cienką linią umieszczoną nad treścią po prawej stronie).

overflow-y: auto; //or hidden if you don't want horizontal scrolling
overflow-y: auto;
scrollbar-color: transparent transparent;

Użyłem tego i zadziałało. https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

html {
scrollbar-width: none;
}

Uwaga: agenty użytkownika muszą zastosować dowolną wartość szerokości paska przewijania ustawioną w elemencie głównym do rzutni.

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

Nie zadziała w Firefoksie, ponieważ Firefox zrezygnował z obsługi ukrytych pasków przewijania z funkcjonalnością (możesz używać overflow: -moz-scrollbars-none;w starszych wersjach).

Na wszelki wypadek, jeśli ktoś szuka hackowania, aby w jakiś sposób uczynić pasek przewijania niewidocznym w przeglądarce Firefox (79.0).

Oto rozwiązanie, które z powodzeniem działa w przeglądarce Chrome, IE, Safari i sprawia, że ​​pasek przewijania jest przezroczysty w przeglądarce Firefox. Żadne z powyższych nie działało w przypadku przeglądarki Firefox (79.0) w prawdziwym ukrywaniu paska przewijania.

Proszę, jeśli ktoś znajdzie sposób na zrobienie tego bez zmiany koloru, będzie to bardzo pomocne. Komentarz Pls poniżej.

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

.scrollhost ::-moz-scrollbar {
  display: none;
 
}
 
.scrollhost {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-color: transparent transparent; /*just hides the scrollbar for firefox */
}

Spróbuj użyć tego:

overflow-y: -moz-hidden-unscrollable;

W niektórych szczególnych przypadkach (element znajduje się po prawej stronie ekranu lub jego przepełnienie nadrzędne jest ukryte) może to być rozwiązanie:

@-moz-document url-prefix() {
  .element {
    margin-right: -15px;
  }
}

Próbowałem wszystkiego i to, co działało najlepiej w moim rozwiązaniu, to zawsze wyświetlać pionowy pasek przewijania, a następnie dodać trochę ujemnego marginesu, aby go ukryć.

To działało dla IE11, FF60.9 i Chrome 80

body {
  -ms-overflow-style: none; /** IE11 */
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: -20px;
}

Mam to działające dla mnie w ReactJS używając create-react-app, umieszczając to w moim App.css:

@-moz-document url-prefix() {
  html,
  body {
    scrollbar-width: none;
  }
}

Również bodyelement maoverflow: auto