There is position: fixed element over the scrolling element,
I want mouse scroll work with mouse wheel on the fixed-element.
I cannot use pointer-events: none;, because, I need button at fixed element.
My idea is :transfer the mouse scroll event to the parent`
but, document.getElementById("parent").dispatchEvent(e); make below error.
How can I prevent this error ?
index.html:20 Uncaught DOMException: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched. at HTMLDivElement.onFixedScroll
window.addEventListener('load', () => {
console.log('load', document.querySelector('.parent'))
document.querySelector('.parent').addEventListener('scroll', (e) => {
console.log(e)
}, true);
document.getElementById("fixed").addEventListener("wheel", onFixedScroll2);
})
function onFixedScroll2(e) {
console.log(e);
document.getElementById("parent").dispatchEvent(e); //<- This is not working.
}
.parent {
height: 300px;
outline: 1px red solid;
overflow: auto;
}
.child {
height: 1500px;
background: #f0f0f0;
outline: 1px blue solid;
}
#fixed {
position: fixed;
right: 150px;
top: 30px;
width: 300px;
height: 200px;
background: yellow;
}
<div class="parent" id="parent">
<div class="child"></div>
</div>
<div class="fixed" id="fixed">
fixed layer
<button>This button need work</button>
</div>