<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width: 100%;
height: auto;
font-family: -apple-system, sans-serif;
}
.disable-scroll {
pointer-events: none;
}
.outer-scroll {
height: 100%;
}
.inner-scroll {
height: 100%;
overflow-y: auto;
}
.box {
height: 50%;
}
.toolbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 44px;
background: white;
}
.toolbar button {
width: 100%;
height: 44px;
}
</style>
</head>
<body>
<div
class="outer-scroll"><div
class="inner-scroll"><button>Tap
me
to
fix
scrolling</button>
<div
class="box"
style="background-color:
red;"></div>
<div
class="box"
style="background-color:
green;"></div>
<div
class="box"
style="background-color:
blue;"></div>
</div></div>
<button onclick="document.querySelector('.outer-scroll').classList.add('disable-scroll'); setTimeout(() => document.querySelector('.outer-scroll').classList.remove('disable-scroll'), 3000);">Tap To Disable Scrolling</button>
</div>
</body>
</html>