JavaScript Answers

How to stop scrolling child div from scrolling the window with JavaScript?

Spread the love

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 -->

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

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *