Element scrollLeft Property - Javascript DOM

Javascript examples for DOM:Element scrollLeft

  1. HOME
  2. Javascript
  3. DOM
  4. Element scrollLeft

Description

The scrollLeft property sets or gets the number of pixels to scroll an element horizontally.

Set the scrollLeft property with the following Values

Value Description
pixels Sets the number of pixels the element's content is scrolled horizontally.

If the element cannot be scrolled, "0" is returned

If the number is greater than the maximum allowed scroll amount, the maximum allowed scroll amount is returned

Return Value

A Number, representing the number of pixels that the element's content scrolled horizontally

The following code shows how to get the number of pixels the content of a <div> element is scrolled horizontally and vertically:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
body {//  ww  w.j  ava 2 s.  co m
    height: 2000px;
    width: 2000px;
}

button {
    position: fixed;
}
</style>
</head>
<body>

<button onclick="myFunction()">Scroll contents of body</button><br><br>

<script>
function myFunction() {
    var body = document.body; // For Chrome, Safari and Opera
    var html = document.documentElement; // Firefox and IE 
    body.scrollLeft += 30;
    body.scrollTop += 10;
    html.scrollLeft += 30;
    html.scrollTop += 10;
    
    console.log(body.scrollLeft);
    console.log(html.scrollLeft);
}
</script>

</body>
</html>

Related Tutorials