【CSS】一部の要素のみスクロール可能にする

「画面全体はスクロール禁止で固定したい。」「でもモーダルウィンドウなど一部の要素ではスクロールできるようにしたい。」そんな時のCSSをご紹介します。

まずは、

html全体をスクロール禁止にする

html, body {
    overflow: hidden;
}

html要素とbody要素にoverflow: hidden;を指定してスクロールを無効にします。

つぎに、

スクロールさせたい要素の設定をする

スクロールさせたい要素にはoverflow: auto;を指定します。これで、この要素のみスクロールが可能になります。

.can-scroll {
    width: max-content;
    height: 200px;
    background-color: orange;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
}

サンプルコード

codepenで作成したサンプルです。

※ブラウザやiOSのバージョンによっては、うまく動かないこともあるのでご注意下さい。