web-dev-qa-db-ja.com

Firefoxでスクロールバーを非表示にする

ページのスクロールバーを非表示にしたいのですが、スクロールバーのようにスクロールできます。だから、overflow：hiddenは使用できません。通常のようにスクロールできるようにしたいのですが、スクロールバーは表示されません。

私はこのcssコードを使用します（not-scroll-bodyクラスはbodyタグのクラスです）

.not-scroll-body::-webkit-scrollbar {
    display: none; 
}

Chromeで動作しますですが、-moz- の代わりに -webkit- このような

.not-scroll-body::-moz-scrollbar {
    display: none; 
}

Firefoxでは機能しません。

それを機能させるために私は何ができますか？

すべての回答をありがとう、私の貧しい英語を申し訳ありません:)

htmlcssfirefoxscrollbarhide
13
Mei

firefox 64で、overflow:autoがあるときにスクロールを非表示にしたい場合、scrollbar-width: none;を実行できるようになりました。やったー！ 関連ドキュメントはこちら （ブラウザのサポートはページの下部に表示されます）。

以下は、Firefoxで垂直スクロールバーと水平スクロールバーを非表示にするシンプルなCSSのみのソリューションです（v64およびFirefoxの開発版でテスト済み） v65.0b8）。 ヒント：青いdivで垂直および水平スクロールを試してください。

.not-scroll-body {
  overflow: auto;
  height: 200px;
  width: 90%;
  background: linear-gradient(to bottom, cyan, blue);
  white-space: no-wrap;

  /* the line that rules them all */
  scrollbar-width: none;
  /* */
}

span {
  width: 200%;
  height: 400%;
  background: linear-gradient(to left, green, yellow);
  display: inline-block;
  margin: 5rem;
}
<div class="not-scroll-body"><span></span></div>
10
protoEvangelion

この答え と私がWebで見つけたすべてのものによれば、-webkit-scrollbarセレクタに相当するFirefoxはありません。どうやら 以前は使用されていました これに使用できるプロパティ-moz-scrollbars-noneですが、削除されて以来、人々 推奨overflow:hiddenを使用するか、ハックmargin-right: -14pxソリューション。

申し訳ありませんが、これ以上役立つことはできません。これをエレガントに行うFirefoxの方法はないようです。

9
Christian Ternus

私はスクロールバーを隠すことができましたが、この解決策ではマウスホイールでスクロールすることができました：

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

cf： https://stackoverflow.com/a/41021131/4881677

これが私のやり方です。CSSのみで、ブートストラップのようなフレームワークでうまく機能します。それは2つの追加のdivを必要とするだけです：

スクロールするテキストを選択したり、タッチスクリーンがある場合は指でスクロールしたりできます。

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}
<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

怠惰な人々のための短いバージョン：

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}
<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>
1
Jean

ローカルでスクロールバーを非表示にしたいと思います。つまり、世界が見るためのWebサーバー上ではなく、Firefoxのローカルコピー上にあります。

これは、opensuse/kde：userChrome.cssで機能することがわかっています。

#content browser {
margin-right -12px !important;
overflow-x:hidden;
overflow-y:scroll;
}

垂直方向のスクロールを完全に非表示にするには、-14pxを使用します（システムテーマのスクロール設定が広い場合はさらに多くなります）。 less（10px）を使用して、その一部を表示しているので、中クリックでページ上の場所にジャンプできます。

私がしたこと、しかし常に機能するとは限らないこと：userContent.css

#content browser {
overflow:-moz-scrollbars-none;
}

-または-

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

上記は以前は機能していましたが、今はマウスホイールのスクロールを失いました。現在、キーボードの矢印キーのみが機能します。

私はあなたが何を望んでいるかを理解し、これが役立つことを願っていますランディス。

0
Landis Reed

overflow：-moz-hidden-unscrollable を使用できる場合があります-これは、すでに dragscroll.js を使用していたため、私のニーズには完全に機能しました。

0
Jon Maloto