Vue.js PWA 縦スクロールを禁止にできたが、横スクロール時には縦も有効になってしまう

Question

passiveをfalseにして縦スクロールを禁止しました。
ページ内にカルーセルがあり、横スクロールをすると縦にスクロールできるようになってしまいます。
これはなぜでしょうか？
スクロール禁止のコードはmain.jsに全部記述しております。
これはカルーセルが原因なのでしょうか？

理想の動作としては、縦スクロールを全面禁止にしてカルーセル等の横スクロールのみを許可したいです。
よろしく御願いします。

// main.js
export default {
  mounted () {
    document.addEventListener('touchmove', function(e) {e.preventDefault();}, {passive: false});
  }
}

html, body{
  overflow-y: hidden;
}

Answer 1

html, bodyにoverflow-yを指定していますが、heightが増えることを制限できていない気がします。(html, bodyをセレクタとして利用するのもちょっとお行儀が悪い感じはしますが。)

それに関しては、posision: absolute; top: 0; bottom: 0のような設定を利用してみては。

また、「カルーセル」がどういったものなのかわかりませんが、ライブラリを利用しているならそれが利用するCSSや、イベントハンドラとバッティングしている可能性があります。

後者に関しては、addEventListenerでのcapture: trueの利用と、e.stopPropagation()を組み合わせて試すのも良いかもしれません。