Как сделать так, чтобы прокрутка мышкой из любого места страницы прокручивала один конкретный элемент? ⇐ CSS

[Anonymous]

Мне нужно прокрутить один конкретный элемент на странице, даже если указатель мыши не наведен на этот элемент...
Обычно я помещаю элемент div, который необходимо прокручивать, вверху слой с прозрачным фоном, но у меня есть меню навигации, которое нужно просматривать и использовать на той же странице.
По моему опыту, CSS чрезвычайно привередлив; одно изменение, которое должно быть эстетическим, в конечном итоге меняет только то, как элементы взаимодействуют друг с другом, и это расстраивает. Я уже несколько часов занимаюсь этим проектом, и мне действительно не хочется снова начинать с нуля только из-за одной такой ошибки... и необходимости проверять, работает ли веб-сайт после каждого добавления CSS.
Я добавлю jsfiddle того, как примерно структурирован мой сайт.


html {
overflow: hidden;
}

.fixed {
position: fixed;
background-color: blue;
width: 50%;
}

.scrollable {
background-color: red;
height: 100vh;
padding-left: 50%;
overflow-y: scroll;
}









Lorem ipsum dolor sit amet

• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________
• _________

Я могу прокручивать любое место красного div, и это работает, но если я прокрутите синий div, красный div не будет прокручиваться. Изменение синего div на pointer-events: none; заставляет все это работать (это был единственный ответ, который я смог найти в Интернете), за исключением того факта, что у меня есть панель навигации с событиями указателя внутри синего div. Можно подумать, что HTML, существующий уже несколько столетий, нашел простой способ позволить фиксированному элементу иметь события указателя И события прокрутки!
TL;DR Есть ли способ сделать прокрутить в любом месте экрана, прокрутить один конкретный div? Заранее спасибо.
Лучшее решение на данный момент:
const s = document.querySelector(".bottom-half");
const f = document.querySelector(".top-container");
var isRunning = false;
f.addEventListener('wheel', function(e) {
if (!isRunning) {
isRunning = true;
s.scrollTop += (e.deltaY < 1) ? -300 : 300;
}
isRunning = false;
});


Подробнее здесь: https://stackoverflow.com/questions/791 ... fic-elemen