2020年07月30日

スクロールバーの削除(新エッジ対応編)

お世話になっております。SeekNextの佐藤です。
今回はスクロールバーの非表示について書いていこうと思います。

以前に書いた記事で「overflow:scroll;を使用した時に表示されるスクロールバーを非表示にする方法」を掲載しましたが、それの追加情報として書いていこうと思います。

前回の記事では、「edge」では以下のコードを記載しておけば非表示することが可能と記載しておきましたが、Windowsの新edgeからはChtomよりのブラウザになったことも受けて以下のコードも必要となりました。

<div class="box">
  コンテンツ内容
</div>
<style>
  .box {
    height: 150px;
    overflow-y: scroll;
    /* IE, Edge 対応 */
    -ms-overflow-style: none;
    /* Firefox 対応 */
    scrollbar-width: none;
  }

  /* 追加で必要なコード */
  .box::-webkit-scrollbar {
    display:none;
  }
</style>

文章で書くとedgeにも「::-webkit-scrollbar」の表記が必要になったということですね!私自身もこれで悩んだので、参考にしていただければと思います!