Прокрутка мышью элемента внутри ShadowRoot не работает в Chrome ⇐ CSS

[Anonymous]

У меня есть элемент div внутри ShadowRoot с фиксированной высотой и автоматическим переполнением. Содержимое больше поля, поэтому появляются полосы прокрутки. Когда на (внешней) странице уже есть полосы прокрутки, кажется, что она не прокручивает div при использовании Chrome. Прокрутка мышью будет нацелена только на страницу, даже если навести курсор на элемент div.

При выполнении этого за пределами ShadowRoot наведенный элемент div прокручивается при использовании мыши. И похоже, что эта проблема работает в других браузерах, кроме Chrome, даже при использовании ShadowRoot.

const App = () => { возвращаться ( Попробуйте прокрутить мышью здесь Скрыто! ); } constContainer = document.createElement("div"); constshadowRoot = контейнер.attachShadow({режим: "открыть" }); const domElement = document.getElementById("root"); domElement.append(контейнер); const root = ReactDOM.createRoot(shadowRoot); root.render(); Привет, мир

В этом примере, если для корневого элемента element.style установлено значение overflow: Hidden, полоса прокрутки начинает работать в элементе div.

Я пытался установить onMouseEnter={() => (document.body.style.overflow = 'hidden')} onMouseLeave={() => (document.body.style.overflow = 'auto ') в приложении, и это вроде как решает проблему, но в конечном итоге страница слегка перемещается. Я также попытался добавить scrollbar-gutter: стабильный;, чтобы устранить этот сбой при удалении внешней полосы прокрутки, и это вроде как работает, но я хотел бы иметь исправление, которое не требует изменения веб-страницы. сам так много.

Есть ли способ заставить div обрабатывать прокрутку мыши без этих хаков?

(В кодах также есть рабочий пример: https://codesandbox.io/s/scrollbar-issu ... c/index.js)