Firefoxでスクロールバーを非表示にする方法は？

Google Chromeでスクロールバーを非表示にする方法を見つけたので、次のコードを使用しました。

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

唯一の問題は、これがFirefoxでは機能しないことです。多くの方法を試しましたが、それでも機能しません。

scrollbar-widthルールを使用できます。あなたはできるscrollbar-width: none;Firefoxでスクロールバーを隠し、まだ自由にスクロールできるようにします。

body {
   scrollbar-width: none;
}

Chrome、Firefox、IEでスクロールバーを非表示にするには、次の方法を使用できます。

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

このソリューションでは、スクロールバーを非表示にすることはできましたが、マウスホイールでスクロールすることはできました。

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

プラグインhttps://github.com/brandonaaron/jquery-mousewheelをダウンロードし、次の関数を含めます。

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

これは、Firefox、Chrome、およびEdgeでスクロールを維持しながら、スクロールバーを無効にするために必要なものです。

          @-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 */
          }

Webkitの場合、以下を使用します。

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

Mozilla Firefoxの場合、次のコードを使用します。

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

スクロールが機能しない場合は、追加します

element {overflow-y: scroll;}

特定の要素に

これは一般的な解決策のようなものです。

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

スクロールバーは親divによって非表示になっています。

これには、親divでoverflow：hiddenを使用する必要があります。

Firefoxの最新バージョンでは、古いソリューションは機能しなくなりましたが、v66.0.3でscrollbar-color設定できるプロパティを正常に使用しました。これtransparent transparentにより、デスクトップ上のFirefoxのスクロールバーが少なくとも非表示になります（引き続きビューポートとモバイルでは機能しませんが、スクロールバーは右側のコンテンツの上に配置された細い線です）。

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

私はこれを使用し、それは機能しました。 https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

html {
scrollbar-width: none;
}

注：ユーザーエージェントは、ルート要素に設定されたスクロールバー幅の値をビューポートに適用する必要があります。

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

Firefoxは機能を備えた非表示のスクロールバーのサポートを廃止したため、Firefoxでは機能しません（overflow: -moz-scrollbars-none;古いバージョンで使用できます）。

念のため、誰かが何らかの方法でスクロールバーをfirefox（79.0）で非表示にするためのハックを探している場合。

これは、Chrome、IE、Safariで正常に機能し、Firefoxでスクロールバーを透明にするソリューションです。上記のどれも、Firefox（79.0）でスクロールバーを本当に隠すのに役立ちませんでした。

誰かが色を変えずにそれをする方法を見つけたら、それは非常に役に立ちます。plsコメント以下。

.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 */
}

これを使用してみてください：

overflow-y: -moz-hidden-unscrollable;

場合によっては（要素が画面の右端にあるか、親のオーバーフローが非表示になっている）、これが解決策になる可能性があります。

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

私はすべてを試しましたが、私の解決策に最も効果的なのは、常に垂直スクロールバーを表示し、それを非表示にするために負のマージンを追加することでした。

これはIE11、FF60.9、Chrome80で機能しました

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

create-react-appこれを私のApp.css：に入れることで、ReactJSでそれを使用して動作させました。

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

また、body要素にはoverflow: auto