<
style
>
.scroll-area {
height: 1000px;
background-color: #eee;
padding: 10%;
}
button {
margin-top: 200px;
margin-bottom: 100px;
display: block;
}
</
style
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
div
>
<
p
>Current position is:
<
b
><
span
id
=
"position"
></
span
></
b
>
</
p
>
</
div
>
<
p
>
Click on the buttons below to get the current
position of the scrollbar.
</
p
>
<
p
class
=
"scroll-area"
>
GeeksforGeeks is a computer science portal.
This is a large scrollable area.
<
button
onclick
=
"getScroll()"
>
Click to get current scrollbar position
</
button
>
<
button
onclick
=
"getScroll()"
>
Click to get current scrollbar position
</
button
>
<
button
onclick
=
"getScroll()"
>
Click to get current scrollbar position
</
button
>
</
p
>
<
script
>
getScroll = () => {
let position = document.getElementById('position');
position.innerHTML = ""
if (window.pageYOffset != undefined) {
position.innerHTML = " X-axis : "
+ pageXOffset + " Y-axis : " + pageYOffset;
} else {
let x_axis, y_axis, doc = document,
ele = doc.documentElement,
b = doc.body;
x_axis = ele.scrollLeft || b.scrollLeft || 0;
y_axis = ele.scrollTop || b.scrollTop || 0;
position.innerHTML = " X-axis : "
+ x_axis + " Y-axis : " + y_axis;
}
}
</
script
>