HTML onscroll Attribute
The onscroll attribute works when an element scrollbar is being scrolled. To create a scrollbar in an element, use the CSS overflow property.
It is triggered when the content within an HTML element is scrolled and used to implement dynamic behaviors based on the scroll position and employed for creating effects like parallax scrolling or revealing elements.
Syntax:
<element onscroll = "script">
Supported Tags
It supports all HTML elements.
Attributes:
This attribute is supported by all HTML elements and the attribute works when the script is triggered.
Example:
In this example, we will see the implementation of the onscroll tag with an example.
HTML
<!DOCTYPE html> < html > < head > < title >onscroll attribute</ title > < style > #gfg { border: 1px solid black; width: 400px; height: 100px; overflow: scroll; text-align: justify; } h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >onscroll attribute</ h2 > < div id = "gfg" onscroll = "Beginner()" > < b >w3wiki:</ b > A computer science portal for Beginner.It ia a good wqebsite for learning computer science. It has a good programming Question and have many Interwiew Experiences. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </ div > < script > function Beginner() { document.getElementById("gfg") .style.color = "green"; } </ script > </ body > </ html > |
Output:
Example2 :
In this example, we will see the implementation of the above onscroll with an example.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >onscroll attribute</ title > < style > body { font-family: Arial, sans-serif; margin: 0; padding: 0; } section { width: 80%; margin: auto; padding: 20px; } #content { border: 1px solid #ccc; padding: 20px; height: 300px; overflow: scroll; transition: color 0.3s ease; } </ style > </ head > < body > < section > < div id = "content" onscroll = "changeFontColor()" > < p >< strong > w3wiki is an portal for computer Beginner where you will find a bunch of articles, quizzes on programming and algorithm. As top product based companies want to hire an employee with great programming skills and it is the perfect place to begin and master them. You will find problems as categorized in school, easy, medium, hard,advanced. There is a lot of variety of problems there and you will find a multiple solution for one problem which improves your perception about how you see the problem, and how you should approach the problem. If you are beginner you can start with basic or easy category and once you find comfortable yourself you can move to higher level. If you want to learn a algorithm you should have a patience because it requires time, discipline. You have to move step by step. Make a proper goal and give yourself enough time atleast 5–6 months to learn. Try to solve atleast one question per day. Learn with mistakes and improve yourself. Note:- Before going to give coding test for any companies make sure you should do “must do coding question on Beginner for Beginner”.</ strong ></ p > </ div > </ section > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 1 and above
- Edge 12 and above
- Firefox 6 and above
- Opera 11.6 and above
- Safari 2 and above
Contact Us