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.
<!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 >GeeksforGeeks</ h1 >
< h2 >onscroll attribute</ h2 >
< div id = "gfg" onscroll = "Geeks()" >
< b >GeeksforGeeks:</ b >
A computer science portal for
geeks.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 Geeks() {
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.
<!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 >
GeeksforGeeks is an portal for computer
geeks 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 geeks for geeks”.</ 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