I tried all the possibilities I know and which I found in Stackoverflow to get window.scrollY value it always gave me "0" even same with window.scrollX. Please, can somebody suggest me what I'm doing wrong?

I tried $window.scrollY, $document[0].documentElement.scrollTop ,$document[0].documentElement.scrollLeft, $window.pageYOffset , angular.element($window) nothing is working for me.

This is my code snippet (angular way)

Here in below code

1. topOfNav working great
2. fixNav is triggering on scroll event
3. eventListener is working great

4. window.scrollY not working and I'm always getting zero.

   $timeout(function () {
      var nav = angular.element($document[0].querySelector("#main"));
   
       // getting this offsetTop value
          var topOfNav = nav.prop('offsetTop');
   
          var fixNav = function () {
          console.log(topOfNav, $window.scrollY);
         };
   
     // this is working great, it is listening to scroll event 
        $window.addEventListener('scroll', fixNav, true); 
    });
   

To test I tried creating simple HTML file and added this snippet (javascript way) in <script></script> tag it's working great.

here is the code (works like a champ)

<script>
  const nav = document.querySelector('#main');
  const topOfNav = nav.offsetTop;
  function fixNav() {
     console.log(topOfNav, window.scrollY);
 }

 window.addEventListener('scroll', fixNav);
 </script>

Additional Information:

• AngularJS Version: 1.6.2
• Browser Type: chrome
• Browser Version: Version 55.0.2883.87 (64-bit)
• OS: Ubuntu 14.04 LTS

Thank you.

EDIT:

After digging too much (Updating Packages, uninstalling and re-installing packages) one thing I found is Angular-Material is the Blocker. I tried with other projects of angular too, the only blocker I found was Angular Material

I tried all the possibilities I know and which I found in Stackoverflow to get window.scrollY value it always gave me "0" even same with window.scrollX. Please, can somebody suggest me what I'm doing wrong?

I tried $window.scrollY, $document[0].documentElement.scrollTop ,$document[0].documentElement.scrollLeft, $window.pageYOffset , angular.element($window) nothing is working for me.

This is my code snippet (angular way)

Here in below code

1. topOfNav working great
2. fixNav is triggering on scroll event
3. eventListener is working great

4. window.scrollY not working and I'm always getting zero.

   $timeout(function () {
      var nav = angular.element($document[0].querySelector("#main"));
   
       // getting this offsetTop value
          var topOfNav = nav.prop('offsetTop');
   
          var fixNav = function () {
          console.log(topOfNav, $window.scrollY);
         };
   
     // this is working great, it is listening to scroll event 
        $window.addEventListener('scroll', fixNav, true); 
    });
   

To test I tried creating simple HTML file and added this snippet (javascript way) in <script></script> tag it's working great.

here is the code (works like a champ)

<script>
  const nav = document.querySelector('#main');
  const topOfNav = nav.offsetTop;
  function fixNav() {
     console.log(topOfNav, window.scrollY);
 }

 window.addEventListener('scroll', fixNav);
 </script>

Additional Information:

• AngularJS Version: 1.6.2
• Browser Type: chrome
• Browser Version: Version 55.0.2883.87 (64-bit)
• OS: Ubuntu 14.04 LTS

Thank you.

EDIT:

After digging too much (Updating Packages, uninstalling and re-installing packages) one thing I found is Angular-Material is the Blocker. I tried with other projects of angular too, the only blocker I found was Angular Material

• javascript
• angularjs
• dom
• angular-material

2 Answers 2

Somewhere removing the style height:100% from the body element, the above code worked for me

The following worked for me:

html, body { height: auto }