2019/11/22 追記
一部のスクロールを禁止にするのではなく一部のスクロールのみ許可して他は全て禁止にするという逆転の発想の方が
使い勝手が良かったので紹介します
このライブラリを使うと色々な問題が解決されていい感じでした
https://github.com/willmcpo/body-scroll-lock
Vueならこっちですね
https://github.com/phegman/v-scroll-lock
1 | npm install v-scroll-lock |
でインストールして、
1 | import VScrollLock from 'v-scroll-lock' |
すると全画面でスクロールが無効になります
で、スクロールさせたい要素だけ
1 | <div v-scroll-lock="true"> |
のようにするとこの要素だけはスクロールできるようになります
以下、原文
普通スクロール禁止といえば以下を使うのだと思いますが、
1 | document.addEventListener('touchmove', function(e) {e.preventDefault();}, {passive: false}); |
これだと画面全体に効いてしまいます
画面の一部の要素だけをスクロール禁止にするCSSを見つけたのでメモしておきます
1 | touch-action: none; |
https://caniuse.com/#feat=css-touch-action
caniuseを見るとデスクトップSafari以外は問題なく使えるので導入しても大丈夫ですね！（）