I am working on a full-screen three.js application which serves as the background and I am trying to add overlaid text that can be scrolled.
However, my issue arises from the fact that the three.js WebGL container intercepts all scroll events and prevents the overlaid content from being scrolled.
The three.js application consists of a <canvas> element and here is my CSS:
canvas {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: -9999;
}
This is the body and the parent <div> element of the scrollable content:
body {
display:block;
}
.page-content {
z-index: 1000;
padding: 0;
}
Both are directly nested under the body.
The script is executed after the content.
Is there a way to prevent the Three.js container from capturing scrolling events (e.g. scrollwheel) and pass them to the .page-content div?