JavaScriptでスクロール無効を実現したいです。

Question

やりたいこと

ボタンAを押したら、Webページのスクロールを無効にして
ボタンBを押したら、Webページのスクロールを有効にしたい

困っていること

書いたコード

無効にさせたい
<button onclick="mukou()"></button>

<script>
function mukou(){
    console.log( document.getElementsByTagName('body')[0]) // 確認用
    document.getElementsByTagName('body')[0].ontouchend = function(e) {
        e.preventDefault();
    }
}
</script>

しらべたところ
https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177
このサイトに

targetElement.ontouchend = (e) => {
    e.preventDefault();
};

このように記載するとスクロールを無効にできるとあったのですが、できませんでした。

スクロールの無効とその解除を任意のタイミングで実現したいのですが、Pure JSで実現させるためにはどのようにしたらいいかご存知のかたいらっしゃいましたらご教示頂けませんでしょうか？

Comments

[Lhankor_Mhy]

ontouchend ということは、スマホでのスクロール無効を考えていらっしゃるのですか？

[EzrealTrueshot]

デスクトップPCから見るWebページ、スマホから見るWebページ両方を想定していますが、デスクトップPCから見るWebページでだけでも実現できたら嬉しいです。スマホの方は最悪あきらめようと思っております。

[Lhankor_Mhy]

ご提示のURLで示されている方法( https://github.com/willmcpo/body-scroll-lock/blob/master/src/bodyScrollLock.js )はダメだったのですか？

[EzrealTrueshot]

1番、2番、３番しか見ていませんでした。
Proposed Solution — body-scroll-lock
というのがあったのですね、確認してみようと思います。

[EzrealTrueshot]

ありがとうございます！
無事に有効と無効ができるようになりました。
ベストアンサーさしあげたいため、何かコメントよろしくお願いいたします！

[Lhankor_Mhy]

https://teratail.com/help#resolve-myself
自己解決のご入力をされるのがいいかと思います。

Answer 1

body-scroll-lockプラグインを利用して

bodyScrollLock.disableBodyScroll('body');
bodyScrollLock.enableBodyScroll('body');

こちらで解決できました。

Answer 2

ontouchendはスマホなどタッチデバイスでのイベント判定に使います。PCの場合onclickイベントを使う方がよさそうです。

以下のように書き換えたところ1度目のクリックでボタンが無効になり、2度目以降のクリックに反応しなくなりました。

無効にさせたい
<button onclick="mukou()">ボタン</button>

<script>
  function mukou() {
    console.log(document.getElementsByTagName('button')[0]) // 確認用
    document.getElementsByTagName('button')[0].onclick = function(e) {
      e.preventDefault();
    }
  }

</script>

https://jsfiddle.net/z6f5xjku/2/

Comments

[Lhankor_Mhy]

質問の趣旨（JavaScriptでスクロール無効）とあっていないと思いますので、マイナス評価しました。

[EzrealTrueshot]

回答ありがとうございます。
bodyScrollLock.disableBodyScroll('body');
bodyScrollLock.enableBodyScroll('body');
この２行で無事に有効、無効の切り替えが実現することができました。