Javascriptでスクロールを一時的に禁止する方法（PC・スマホ対応） | ARAKAZE NOTE
Photo by フリー写真素材ぱくたそ 今回紹介するのはJSでスクロールを一時的に禁止する方法です。 以外と使う機会多いんですよね。 「このライトボックスを開いた際はページのスクロールは止めたい…」 「このスマホサイト、このメニューを開いた場合はスクロールされないようにしたい」 「または、全体はスクロール禁止で指定オブジェクトのみスクロールさせたい」 制作しているとこんな要望を聞くことがたまにあります。 やり方忘れた頃にぽろぽろと出現するのでメモしておこうと思います。 ちなみに生のJSで書くのは手間なのでjQueryは使います。 スクロールイベントを取得して何もしなければいい やり方は単純で、mousewheelやtouchmoveとかに”何もしないイベント”を追加すればいいのです。 PCは色々あるマウスホイールイベントをまとめて指定、スマホの方はtouchmoveにスクロール禁止のイベ
リサイズやスクロール時に1回だけ処理を行う
resizeやscrollは通常イベントが発生する毎に処理を行いますが、イベント発生毎ではなく、特定のときに1回だけ処理を行いたいという時がよくあります。 今回は特定の状態になったら処理を行い、それ以降は処理を行わないような実装を試してみます。 サンプルコード スクロールで特定の位置まで来たら、要素のアニメーションを1回だけ行うようにしてみます。 まずは特に対応しなかった場合です。 HTML <div class="box"></div> CSS .box { position: absolute; top: 1000px; left: 100px; width: 200px; height: 200px; background: #ccc; } JavaScript $(function() { $(window).on('scroll', function() { // スクロール位置
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
