AngularJS Get Element Scroll Position

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
    <style>
      .container {
        max-width: 500px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .container h3 {
        font-size: 24px;
        margin-bottom: 20px;
      }

.container p {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 10px;
      }

.container div {
        max-width: 100%;
        height: 200px;
        overflow: auto; /* or overflow-x: scroll; */
        white-space: nowrap; /* Ensures the content stays in a single line */
      }
    </style>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myController" class="container">
      <h3>AngularJS Get Element Scroll Position</h3>
      <div id="myElement" ng-init="trackElementScrollPosition('myElement')">
        <p>
          Font Awesome is a popular icon set used by designers and developers
          worldwide. It was created by Dave Gandy in 2012 and has since become
          one of the most widely used icon sets on the web.
          <br />
          Font Awesome icons are vector-based, which means they can be scaled to
          any size without losing their quality or becoming pixelated.
        </p>
        <p>
          Font Awesome is a popular icon set used by designers and developers
          worldwide. It was created by Dave Gandy in 2012 and has since become
          one of the most widely used icon sets on the web.
          <br />
          Font Awesome icons are vector-based, which means they can be scaled to
          any size without losing their quality or becoming pixelated.
        </p>
        <p>
          Font Awesome is a popular icon set used by designers and developers
          worldwide. It was created by Dave Gandy in 2012 and has since become
          one of the most widely used icon sets on the web.
          <br />
          Font Awesome icons are vector-based, which means they can be scaled to
          any size without losing their quality or becoming pixelated.
        </p>
        <p>
          Font Awesome is a popular icon set used by designers and developers
          worldwide. It was created by Dave Gandy in 2012 and has since become
          one of the most widely used icon sets on the web.
          <br />
          Font Awesome icons are vector-based, which means they can be scaled to
          any size without losing their quality or becoming pixelated.
        </p>
      </div>
      <p>Scroll Top: {{ positionTop }}px</p>
      <p>Scroll left: {{ positionLeft }}px</p>
    </div>

$scope.trackElementScrollPosition = function (elementId) {
          var element = angular.element(document.getElementById(elementId));
          element.on("scroll", function () {
            $scope.$apply(function () {
              $scope.positionTop = element[0].scrollTop;
              $scope.positionLeft = element[0].scrollLeft;
            });
          });
        };
      });
    </script>
  </body>
</html>

​x
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
    <style>
      .container {
        max-width: 500px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .container h3 {
        font-size: 24px;
        margin-bottom: 20px;
      }
​
      .container p {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 10px;
      }
​
      .container div {
        max-width: 100%;
        height: 200px;
        overflow: auto; /* or overflow-x: scroll; */
        white-space: nowrap; /* Ensures the content stays in a single line */
      }
    </style>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myController" class="container">
      <h3>AngularJS Get Element Scroll Position</h3>
      <div id="myElement" ng-init="trackElementScrollPosition('myElement')">
        <p>
          Font Awesome is a popular icon set used by designers and developers
          worldwide. It was created by Dave Gandy in 2012 and has since become
          one of the most widely used icon sets on the web.
          <br />
          Font Awesome icons are vector-based, which means they can be scaled to
          any size without losing their quality or becoming pixelated.
        </p>
        <p>
          Font Awesome is a popular icon set used by designers and developers
          worldwide. It was created by Dave Gandy in 2012 and has since become
          one of the most widely used icon sets on the web.
          <br />
          Font Awesome icons are vector-based, which means they can be scaled to
          any size without losing their quality or becoming pixelated.
        </p>
        <p>
          Font Awesome is a popular icon set used by designers and developers
          worldwide. It was created by Dave Gandy in 2012 and has since become
          one of the most widely used icon sets on the web.
          <br />
          Font Awesome icons are vector-based, which means they can be scaled to
          any size without losing their quality or becoming pixelated.
        </p>
        <p>
          Font Awesome is a popular icon set used by designers and developers
          worldwide. It was created by Dave Gandy in 2012 and has since become
          one of the most widely used icon sets on the web.
          <br />
          Font Awesome icons are vector-based, which means they can be scaled to
          any size without losing their quality or becoming pixelated.
        </p>
      </div>
      <p>Scroll Top: {{ positionTop }}px</p>
      <p>Scroll left: {{ positionLeft }}px</p>
    </div>
​
    <script>
      angular.module("myApp", []).controller("myController", function ($scope) {
        $scope.positionTop = 0;
        $scope.positionLeft = 0;
​
        $scope.trackElementScrollPosition = function (elementId) {
          var element = angular.element(document.getElementById(elementId));
          element.on("scroll", function () {
            $scope.$apply(function () {
              $scope.positionTop = element[0].scrollTop;
              $scope.positionLeft = element[0].scrollLeft;
            });
          });
        };
      });
    </script>
  </body>
</html>
​