CSS – прокрутка внутри родительского элемента при наведении фиксированного дочернего элемента ⇐ CSS

[Anonymous]

У меня есть элемент с внутренней прокруткой. Внутри него есть контент, который можно прокручивать, а также позиция: фиксированная; дочерний элемент, образующий что-то вроде боковой панели.

Если я наведу курсор где-нибудь внутри родительский элемент и прокрутка, содержимое родительского элемента прокручивается так, как и ожидалось. Однако если я наведу курсор на фиксированный дочерний элемент, который все еще находится внутри ограничивающей рамки родительского элемента, и прокрутлю, этого не произойдет:

Код: Выделить всё

body,
html {
margin: 0;
}

#container {
position: relative;
width: 100%;
height: 100vh;
overflow-y: auto;
}

#sidebar {
position: fixed;
right: 10px;
width: 100px;
top: 10px;
height: calc(100% - 20px);
background-color: red;
}





[url=https://google.com/]Link to click[/url]
When hovering here, scroll does NOT work.

Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
... and so on. When hovering here, scroll works.

Я понимаю использование этой функции, но я заинтересован в том, чтобы событие прокрутки по-прежнему распространялось вверх от дочернего элемента Position:fixed; к его родительскому элементу overflow:auto;, позволяя пользователю прокручивать родительский элемент даже при наведении курсора на дочерний элемент. Возможно ли это?

Я уже пробовал использовать JavaScript для отслеживания событий прокрутки дочернего элемента, а затем передавать их родительскому элементу, но такие события прокрутки не перехватываются. (Я полагаю, что самому элементу нечего прокручивать внутри). Я также пробовал различные конфигурации родительского элемента (

Код: Выделить всё

position:relative;

, позиция:абсолютная;, позиция:фиксированная;), все безрезультатно. Проблема возникает только тогда, когда дочерний элемент исправлен, но установка его как абсолютного невозможна.

Предпочтительно, я хотел бы выполнить это без JavaScript, поэтому может оказаться полезным разбивка возможных решений (только HTML, HTML и CSS и только JavaScript).



I Я знаю об этом вопросе, но первый ответ не работает, поскольку прокрутка при наведении фиксированного дочернего элемента не вызывает событие прокрутки (ни для дочернего, ни для родительского элемента). Второй ответ также неосуществим, поскольку он перемещает дочерний элемент за пределы родителя, что в моем случае невозможно.



Изменить: Харш Каранпурия предложил мне добавить pointer-events: none; на боковую панель. Это действительно дает желаемый результат, но также делает элементы боковой панели недоступными для кликов, чего я бы не хотел делать! После их ответа я также снова поэкспериментировал с созданием дочерних элементов sidebar pointer-events: all;, но обнаружил, что, хотя это и восстановило мою способность щелкать по ним, снова удалил прокручиваемый характер при наведении на внука.

Подробнее здесь: https://stackoverflow.com/questions/591 ... ixed-child