<section class="section"></section>

<section class="section"></section>

<section class="section"></section>

<section class="section"></section>

<section class="section"></section>

<section class="section"></section>

<section class="section"></section>

<div class="btn_wrap">
    <div class="btn" id="off">スクロール停止</div>
    <div class="btn" id="on">スクロール</div>
</div>
html,
body{
    height: 100%;
}

.section{
    width: 100%;
    height: 50%;
}
.section:nth-child(odd){
    background-color: #e6e6e6;
}
.section:nth-child(even){
    background-color: #fff;
}

.btn_wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 30px;
    left: 0px;
    width: 100%;
}

.btn{
    border: 1px solid #000;
    border-radius: 50px;
    cursor: pointer;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%;
    height: 45px;
}
function noscroll(e){
    e.preventDefault();
}

$('#on').on('click', function(){
    document.removeEventListener('touchmove', noscroll);
    document.removeEventListener('wheel', noscroll);
});

$('#off').on('click', function(){
    document.addEventListener('touchmove', noscroll, {passive: false});
    document.addEventListener('wheel', noscroll, {passive: false});
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js