[Edit]

JavaScript - get div scroll top

1 contributors

2 contributions

0 discussions

0 points

Created by:

JoanneSenior

1070

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

Quick solution:

xxxxxxxxxx
 
element.scrollTop;

Practical example

Edit

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

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    #scroll-container {
      overflow: scroll;
      height: 150px;
      width: 200px;
    }
​
    #output {
      padding: 1rem 0;
    }
  </style>
</head>
<body>
    <div id='scroll-container'>
      <p>Example text...</p>
      <p>Example text...</p>
      <p>Example text...</p>
      <p>Example text...</p>
      <p>Example text...</p>
    </div>
  <div id='output'>scrollTop: 0</div>
  <script>
​
    const scrollContainer = document.querySelector('#scroll-container');
    const output = document.querySelector('#output');
​
    scrollContainer.addEventListener('scroll', event => {
      output.textContent = 'scrollTop: ' + scrollContainer.scrollTop;
    });
​
  </script>
</body>
</html>