<html>
<head>
<style>
body{
overflow:hidden;
height:100vh;
}
.overflow{
min-height:100vh;
overflow-y:auto;
}
</style>
</head>
<body>
<div class=“overflow”>
Content
<div>
</body>
</html>
К примеру , задаем для body фиксированную высоту, которая равна высоте экрана. Внутри него создаем блок со свойством: overflow-y:auto , что позволяет скролить, в случае если контент больше высоты экрана. Таким образом - сама страница остается статичной и неподвижной, а скроллинг происходит только контента внутри блока div.
<html>
<head>
<style>
body{
display:grid;
overflow:hidden;
height:100vh;
grid-template-columns:200px auto;
}
.no-overflow{
}
.overflow{
min-height:100vh;
overflow-y:auto;
}
</style>
</head>
<body>
<div class=“no-scroll”>
Leftblock
</div>
<div class=“overflow”>
Content
<div>
</body>
</html>
Во втором примере, предварительно сделал сетку на стринце - первый блок (no-overflow) - останется статичным, относительно всей страницы во время скрола
Средний
