To prevent a child div from scrolling the window when you’re scrolling inside it, you can use JavaScript to intercept the scroll event on the child div and stop the event propagation to the window.
To do this we can write:
<div id="parentDiv" style="overflow: auto; height: 200px;">
<div id="childDiv" style="height: 400px;">
<!-- Content of the child div -->
</div>
</div>
<script>
var parentDiv = document.getElementById("parentDiv");
var childDiv = document.getElementById("childDiv");
childDiv.addEventListener("wheel", function(e) {
e.stopPropagation(); // Stop the scroll event from bubbling up to the parent div
});
</script>
In this example, the wheel event is used, which is triggered when the user scrolls with a mouse wheel or similar input device.
Adjust the event listener based on your needs (e.g., scroll event for scrolling with scrollbar).
This code prevents the scroll event from reaching the parent div (parentDiv) when scrolling inside the child div (childDiv), effectively preventing the window from scrolling when you scroll inside the child div.
