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

2014-07-03 13:06:15 +00:00
Commented Jul 3, 2014 at 13:06 — Portekoi
– Portekoi, Commented Jul 3, 2014 at 13:06

Sark · Accepted Answer · 2014-07-03 12:55:16Z

3

try this

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

answered Jul 3, 2014 at 12:55

Sark

4,5565 gold badges28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:14:03Z

2

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

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 3, 2014 at 12:56

xyleen

1013 bronze badges

Collectives™ on Stack Overflow

Muiltiple Scroll Error in HTML Page

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related