Есть несколько вопросов по этой теме, но большинству из них несколько лет.
Мне просто интересно, есть ли способ расположить вашу страницу таким образом, чтобы колесо прокрутки прокручивало определенный div независимо от того, где находится колесо мыши.
Например, при стековом потоке, если вы прокрутите домашнюю страницу вниз, вы увидите, что левое меню остается фиксированным, и вы можете прокручивать его, когда указатель мыши находится над меню, даже когда указатель мыши находится над строкой заголовка. Однако, возможно, я использую JavaScript, я не знаю.
Прежде чем углубиться в решения javascript, я подумал, позволил ли это CSS, возможно, с использованием div по умолчанию или какой-то другой техники CSS.
Вот скрипка моего макета: https://jsfiddle.net/thjyf5c3/
<body style="display: flex; flex-direction: column; height:100vh; overflow-y: hidden">
HEADER FOR THE PAGE
<div style="flex-flow: column; display:flex;flex:1">
<div style="flex: 1; display:flex;">
<div style="background-color: red; max-width: 200px; min-width: 100px; flex-basis: 20%">test</div>
<div style="background-color: purple;flex: 1; display: flex">
<div style="flex-grow:1; position: relative; overflow:hidden; ">
<div style="position:absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: scroll">
<div style="flex: 1; display:flex;">
<span style="font-size:500px">a<br />b<br />c<br /> </span>
</div>
</div>
</div>
</div>
<div style="background-color: blue;flex: 1">test</div>
</div>
</div>
Как видите, он не прокручивается, если мышь не находится в границах сетки.