HTML ページのスクロールバーを非表示にする質問する

Question

WebKit は、標準の CSS ルールで非表示にできるスクロールバー疑似要素をサポートしています。

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

すべてのスクロールバーを非表示にしたい場合は、

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

復元についてはよくわかりません。これは機能しましたが、正しい方法があるかもしれません。

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

もちろん、を常に使用してwidth: 0、で簡単に復元することもできますwidth: autoが、私は可視性の調整にを悪用するのは好きではありませんwidth。

Firefox 64では実験的なスクロールバー幅プロパティデフォルトでは(63では設定フラグを設定する必要があります)。Firefox 64でスクロールバーを非表示にするには:

#element {
    scrollbar-width: none;
}

現在のブラウザが疑似要素またはのいずれかをサポートしているかどうかを確認するにはscrollbar-width、次のスニペットを試してください。

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(水平バーも非表示になるため、これは質問に対する正しい回答ではないことに注意してください。しかし、Google がここに誘導したときに私が探していたのはまさにそれだったので、とにかく投稿することにしました。)

Answer 1