[Edit]

JavaScript - get div scroll left

1 contributors

2 contributions

0 discussions

0 points

Created by:

Hayley-Mooney

677

In this article, we would like to show you how to get the div element scrollLeft property using JavaScript.

Quick solution:

xxxxxxxxxx
 
element.scrollLeft;

Practical example

Edit

In this example, we get the handle to scrollContainer element, then we use scrollLeft property to get the number of pixels that an element's content is scrolled horizontally. The value of scrollLeft property is displayed as the output element textContent.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    #scroll-container {
      width: 100px;
      border: 1px solid lightgray;
      overflow-x: scroll;
    }
​
    #text {
      width: 250px;
    }
​
    #output {
      padding: 1rem 0;
    }
  </style>
</head>
<body>
  <div id='scroll-container'>
    <div id='text'>This is an example text...</div>
  </div>
  <div id='output'>scrollLeft: 0</div>
  <script>
​
    const scrollContainer = document.querySelector('#scroll-container');
    const output = document.querySelector('#output');
​
    scrollContainer.addEventListener('scroll', event => {
      output.textContent = 'scrollLeft: ' + scrollContainer.scrollLeft;
    });
​
  </script>
</body>
</html>