【JavaScript】スクロール禁止してドラッグ操作を可能にする方法

何度も同じ内容を忘れては調べてるので、備忘録として要点をまとめたページを作りました。

要素をドラッグして移動するとき、サイト自体も一緒にスクロールしてしまうことがあります。

こちらがスクロールを無効にするJavaScriptです。

const main = document.querySelector("main")

main.addEventListener("touchmove", noscrool, {passive: false})

function noscrool(event) {
  // スクロール禁止
  event.preventDefault()
}

こちらから実際の結果を確認できます。

スクロール禁止

スクロール禁止してドラッグ操作を可能にします。

web-application-lab.online

preventDefault()の解説

preventDefault() は、イベントの持つ既定の動作をキャンセルするメソッドです。

これらの操作が既定の動作です。

passive: false の解説

「passive」は、addEventListenerメソッドのオプションで passive: trueの場合「preventDefault()」を呼び出さなくなります。

preventDefault() を使う場合は、{passive: false} のオプションをつけます。

ChromeやFirefoxではデフォルトでpassive: trueになっています。

ダブルタップを禁止する場合

ダブルタップでのズーム機能（画面拡大）を無効にする場合は、「”touchmove”」を「”dblclick”」に変更します。

const main = document.querySelector("main")

main.addEventListener("dblclick", nozoom, {passive: false})

function nozoom(event) {
  // ダブルクリック禁止
  event.preventDefault()
}