HTML - attributes - onscroll

revision:


Content

"onscroll" attribute : when a scrollbar is being scrolled syntax some examples


"onscroll" attribute : when a scrollbar is being scrolled

top

The onscroll event occurs when an element's scrollbar is being scrolled.

Supported HTML tags: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <<menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>.


syntax

top

<element onscroll="script"></element>

script: the attribute works when the script is triggered.


some examples

top

Try the scrollbar in div.

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'

Scrolled 0 times.

codes:

                    <p class="spec">Try the scrollbar in div.</p>
                    <div id="one1" style="margin-left:3vw;" onscroll="myScroll()">In my younger and
                    more vulnerable years my father gave me some advice that I've been turning over
                    in my mind ever since.
                    <br><br>
                    'Whenever you feel like criticizing anyone,' he told me, just remember that all 
                    the people in this world haven't had the advantages that you've had.'</div>
                    <p class="spec">Scrolled <span id="demo">0</span> times.</p>
                    <script>
                        var x = 0;
                        function myScroll() {
                        document.getElementById("demo").innerHTML = x += 1;
                        }
                    </script>
                    <style>
                        #one1{ border: 1px solid black; width: 25vw;  height: 10vw; overflow: scroll;  }
                    </style>
                

Try the scrollbar in div.

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'

codes:

                    <p class="spec">Try the scrollbar in div.</p>
                    <div id="two1" style="margin-left:3vw;" onscroll="scrollMe()">In my younger
                    and more vulnerable years my father gave me some advice that I've been turning 
                    over in my mind ever since.
                    <br><br>
                    'Whenever you feel like criticizing anyone,' he told me, just remember that all 
                    the people in this world haven't had the advantages that you've had.'</div>
                
                    <script>
                        function scrollMe() {
                        document.getElementById("two").style.background = "green";
                        }
                    </script>
                    <style>
                        #two1{ border: 1px solid black; width: 25vw;  height: 10vw; overflow: scroll;  }
                    </style>