iOS / Androidでスクロール禁止にするが一部だけはスクロールできるようにする

表題の通りですが、スクロール禁止にするが一部だけはスクロールできるようにする場合の対応。

基本はhtmlにoverflow: 'hidden'を掛けて、スクロールしたいところにoverflow: 'scroll'を掛ければいいのですが (あまり確認していないので違うかも…)、iOSだとJavaScriptを使う必要があります。

スクロール禁止にする場合はpreventDefault()（と、{passive: false}も第三引数に必要）をtouchmoveイベントの時に実行すればいいのですが、注意するポイントが2つあります。

1. スクロール禁止を解除する場合
   • removeEventListnerを実行すればいいのですが、addEventListnerを実行したときと同じ関数を渡さなければなりません。この時アロー関数だとaddの時とremoveの時で違うものとなりますのでアロー関数は使わないようにします。
2. 表題の通り一部だけはスクロールできるようにする場合
   • スクロールしたい場合はpreventDefault()の代わりにstopPropagation()を実行すればよいです。下記のコードではtouchmoveイベントが発生した時の要素の親にjs-can-scrollクラスがあれば、スクロールできるようにstopPropagation()を実行するようにしています。

        // スクロールを無効化
        $('html').css({
            overflow: 'hidden'
        });
        document.addEventListener(
            'touchmove',
            scrollControll,
            {
                passive: false
            }
        );

        // スクロールを有効化
        $('html').css({
            overflow: ''
        });
        document.removeEventListener(
            'touchmove',
            scrollControll,
            {
                passive: false
            }
        );

    // add/removeEventListenerでアロー関数として定義するとイベントが削除されない
    var scrollControll = function(event) {
        if ($(event.target).closest('.js-can-scroll').length > 0) {
            event.stopPropagation();
        } else {
            event.preventDefault();
        }
    };

参考: iOS でページ全体はスクロールを無効にし、個別の要素（textarea など）では有効にする方法 - Qiita