【CSS】position: fixedの領域をスクロールできるようにする

CSS
code 
.drawer-menu {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  padding: 120px 0;
  background: #222;
}

ドロワーメニューでposition: fixedで作成して、height:100%に指定してるときにでもスクロールさせたいという場合です。
例えば、上記のようなCSSが書かれている場合です。

スクロールできるようにする

.drawer-menu {
  bottom: 0;
  overflow-y: auto;
}

「bottom: 0;」「overflow-y: auto;」を追加すると、スクロールできるようになります。

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

.drawer-menu 
{
  -ms-overflow-style: none;  /* IE10+,Edge */
}
.drawer-menu::-webkit-scrollbar  /* Webkit(Chrome) */
{
  display: none;
}

・スマホは何も書かなくても、スクロールバーがでない
・IE10+,Edge,Chromeは上記のように書くと消える

FireFoxは、消し方がわからないので、表示されたまま

・::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN
・-ms-overflow-style - CSS: Cascading Style Sheets | MDN

親要素.sapmle3-wrapより子要素.sample3-ulをスクロールバー分大きくして、親要素からはみ出た要素(スクロールバー)をdisplay:hiddenしています。スクロールしているのは子要素の方です。
スクロールさせる領域だけどスクロールバーは非表示にしたい。

上記のようになれば、FireFox関係なく消えるみたいだけど・・。

参考

・CSS Fixedしたコンテンツでスクロールさせたい - かもメモ
・スクロールさせる領域だけどスクロールバーは非表示にしたい。
スポンサーリンク

関連記事