How can I scroll the dom instead of the entire page when I move the mouse over it?

there is a problem that has been bothering me. The page is as follows, which is a simple html code-generated page. The page contains a div, in the body tag. I artificially make the body scrollable and the div content scrollable.

the effect of the page is: when your mouse is outside the div, you scroll the page, the whole page scrolls with it, and when your mouse moves over the div, scroll the mouse wheel, which scrolls the div.

this is the effect I want, this is reasonable, write an ordinary page default is such an effect, the problem is, in a complex page, multiple div, drop-down boxes, etc., often lose this effect, your scrolling will scroll the entire page, you must mouse click to scroll the div scroll bar in order to scroll this div.

so what I want to ask is, what affects this operation? I don"t even know how to search for Baidu. Because the default effect is correct, and this effect will be lost when the page is complex (using some other people"s plug-ins, such as drop-down selections, etc., have this effect).

I guess this kind of behavior can be controlled. There is a boss passing by to guide, which aspects of knowledge to inquire about, or what should be done?

the page code, browser Chrome

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="width: 400px;margin: 30px;">
        <div style="width: 200px;height: 300px;overflow-y: auto;font-size: 30px;margin-bottom: 6000px;padding: 50px;border: 1px black  solid;">
            <div style="padding-bottom: 300px;"></div>
            <div></div>
            <div></div>
        </div>
    </body>
    <script type="text/javascript">
        
    </script>
</html>
Mar.21,2021

event delegate (event proxy) learn about


event bubbling, learn about it.

Menu