revision:
The "scrollLeft property" sets or returns the number of pixels an element's content is scrolled horizontally.
Syntax:
element.scrollLeft : returns the scrollLeft property: the number of pixels the element's content is scrolled horizontally.
element.scrollLeft = pixels : sets the scrollLeft property.
property value:
pixels : The number of pixels the element's content is scrolled horizontally. 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>