<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>

body.no_scroll{
    overflow: hidden;
}

.section{
    width: 100%;
    height: 50vh;
}
.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;
}