Muiltiple Scroll Error in HTML Page

Question

I have a below html page

<html>
    <head>
        <title> Test Page </title>

    </head>

    <body>
            <div id="testdiv" style="height:300px; width:200px; overflow:scroll;">
                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div

                <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            </div>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   </body>

</html>

I this page i added the below script

<script>
$( window ).scroll(function(){
    alert('Window Scroll');
});

$('#testdiv').scroll(function(){
    alert('testdiv Scroll');
});

</script>

Which will alert me which scroll action is called.

if i scroll in body it alerts me as Window Scroll

if i scroll in a div which is inside of the body its alerting me as testdiv scroll,Window Scroll

but it should alert only testdiv scroll why its alerting me 2 scroll events

On my FF 30, i've not this error. – Portekoi Jul 03 '14 at 13:06 — Portekoi, Jul 03 '14 at 13:06

score 3 · Accepted Answer · answered Jul 03 '14 at 12:55

3

try this

$('#testdiv').scroll(function(e){
    alert('testdiv Scroll');
    e.stopPropagation();
});

answered Jul 03 '14 at 12:55

Sark

4,458
5
26
25

score 2 · Answer 2 · edited May 23 '17 at 12:14

2

Your scroll event bubbles up. Please see What is event bubbling and capturing? for the event bubbling explanation.

edited May 23 '17 at 12:14

Community

1
1

answered Jul 03 '14 at 12:56

xyleen

101
3

Muiltiple Scroll Error in HTML Page

2 Answers2