revision:
The "scrollTop property" sets or returns the number of pixels an element's content is scrolled vertically.
Syntax:
element.scrollTop : returns the scrollTop property: the number of pixels the element's content is scrolled vertically.
element.scrollTop = pixels : sets the scrollTop property.
property value:
pixels : The number of pixels the element's content is scrolled vertically. If the number is negative, the number is set to 0.If the element cannot be scrolled, the number is set to 0. If the number is greater than maximum allowed, the number is set to the maximum.
example
<div>
<div id="DIV" onscroll="firstFunction()">
<div id="content">Scroll me..</div>
</div>
<p id="prop"></p>
</div>
<style>
#DIV{ margin-top: 10px; height: 250px; width: 250px; overflow: auto;}
#content { height: 800px; width: 2000px; padding: 10px; background-color: coral;}
</style>
<script>
function firstFunction() {
const element = document.getElementById("DIV");
let x = element.scrollLeft;
let y = element.scrollTop;
document.getElementById ("prop").innerHTML = "Horizontally: " + x.toFixed() + "<br>
Vertically: " + y.toFixed();
}
</script>
Click "Scroll" to scroll the contents of "DIV1" to 50px horizontally and 10px vertically.
Some text inside a div element.
Some text inside a div element.
Some text inside a div element.
Some text inside a div element.
<div>
<p>Click "Scroll" to scroll the contents of "DIV1" to 50px horizontally and 10px vertically.</p>
<button onclick="secondFunction()">Scroll</button><br><br>
<div id="DIV1">
<div id="content1">
<p>Some text inside a div element.</p>
<p>Some text inside a div element.</p>
<p>Some text inside a div element.</p>
<p>Some text inside a div element.</p>
</div>
</div>
</div>
<style>
#DIV1 {height: 250px; width: 250px; overflow: auto;}
#content1 {height: 800px; width: 2000px; background-color: coral;}
</style>
<script>
function secondFunction() {
const element = document.getElementById("DIV1");
element.scrollLeft = 100;
element.scrollTop = 50;
}
</script>