CSS/JavaScript、
スクロールの禁止と解除。

実はこれで良い。

こんにちは、「ふ」です。
webページのスクロールを一時的に禁止し、その間に何らかの効果を実装したい....と思ったことはないでしょうか？

３つの処理は面倒。

一般的にユーザが画面をスクロールさせるときの操作は、

　・マウスホイール(PC)
　・タッチムーヴ（タッチデバイス）
　・スクロールバーのドラッグ

の３つが考えられます。
ただしこれらすべてを１つ１つ処理していくのは面倒💧

overflowの制御で十分。

それならCSSの「領域からはみ出した部分の処理を指定」する、overflowプロパティを制御したほうが手っ取り早い、という結論に達しました。
ただしスクロールの禁止と解除は、JavaScriptを使って制御する必要があります。

今回はCSSを使ったスクロールの禁止/解除、その制御をJavaScriptで行う方法について紹介していきます。

実例。

実際に試してみます。
先づはスクロール領域を用意しましょう。

<div id = "area"> <div style = "background-color:lightyellow;"></div> <div style = "background-color:cornflowerblue;"></div> <div style = "background-color:deeppink;"></div> </div>

親divの中に子要素として、３つの子divを入れておきました。

#area div { 「「４height:80%;」」 width:100%; } #area { height:20em; width:80%; border:solid 1px; margin:0 auto; 「「１overflow-y:auto;」」 }

子要素１つあたりのheightを親要素の80%としているので、このままだと親領域からはみ出してしまいます。そこで、overflow-y（Y方向にはみ出した部分の処理）を「auto」としています。

overflowの値を「auto」とした場合。
子要素が親領域に収まっている場合には何も起きず、はみ出してしまう場合にはスクロールできるようになります。

それではoverflow-yを「hidden（隠す）」に書き換えてみます。

#area { height:20em; width:80%; border:solid 1px; margin:0 auto; 「「１overflow-y:hidden;」」 }

「hidden」にすると、領域からはみ出した部分は非表示となり、スクロールで追跡することもできなくなります。

「auto」「hidden」を切り替えることによって、スクロールの禁止/解除の切り替えが実現します。

JavaScriptで制御。

それでは２つの切り替えをJavaScriptで制御できるようにしましょう。

スクロールの禁止と解除のきっかけについては、みなさんのこれから作りたいものによってさまざまとなるでしょう。 今回のサンプルではボタンによる切り替え、ということにしました。

<button onclick = "ban()">禁止</button> <button onclick = "lift()">解除</button>

スクロール領域の下にボタンを配置し、それぞれ関数を呼び出せるようにしておきます。

今はボタンを押しても、何も起きません。
JavaScriptで、関数を書いていきます。

「「３//スクロール領域を取得」」 const area = document.getElementById("area"); 「「３//スクロールを禁止する関数」」 function ban() { area.style.overflowY= "hidden"; } 「「３//禁止を解除する関数」」 function lift() { area.style.overflowY = "auto"; }

CSSでは「overflow-y」と表記していましたが、JavaScriptでのプロパティ記述は「overflowY」とキャメルケースでの表記になりますので注意してください。

これ⬆︎で実装完了です。
禁止ボタンを押すとスクロールできなくなり、解除ボタンでスクロールが開放されます。

スクロール途中でもOK。

実際に操作してみるとわかりますが、スクロール途中で禁止ボタンを押してもその位置で停止し、スクロールがロックされます。この性質を使って何かできそうですね。

スクロールバーは非表示に。

前のセクションの内容でとりあへずは完成ですが、スクロール禁止/解除の切り替え時に右側のスクロールバーが出たり消えたりするのは、ちょっと見かけがよろしくない。
いっそのこと、バーは非表示にしてしまいましょう。

#area { height:20em; width:80%; border:solid 1px; margin:0 auto; 「「１scroll-bar-width:none;」」 } #area::-webkit-scrollbar { 「「１display: none;」」 }

CSSでスクロールバーを常に非表示にするには⬆︎のように指定します。
2022年現在においても、ベンダープレフィックスが必要になるとは....💧

常時スクロールバーを非表示にしました。
これでスッキリしましたね。

準備は整った。

最後までお読みくださり、ありがとうございました。
JavaScriptによるスクロールの禁止と解除、当初はイベントリスナによるユーザ操作の制御で考えていたのですが、CSSのoverflowを切り替えてやるほうがよっぽど手軽でコードも単純です。
それに気づいて、１から記事を書き直した「ふ」でした（笑）

扨（さて）スクロールの制御ができたところで、準備は整いました。
このあとは一時的にスクロールを止めて、その間何かをする、というものを作ってみたいと思っています。調査が完了次第、また記事をアップさせていただきます。

ではまた〜 ♫