CODEWITHSUNDEEP
javascriptangularjsdomangular-material
Rajath M S
Rajath M S

Reputation: 1092

$window.scrollY , window.scrollY and window.pageYOffset nothing is working in angularjs

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:

Thank you.

EDIT:

Angular Material Version: 1.x.x

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

Upvotes: 0

Views: 5736

Answers (2)

Asim Mahar
Asim Mahar

Reputation: 1410

The following worked for me:

html, body { height: auto }

Upvotes: 1

Rajath M S
Rajath M S

Reputation: 1092

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

Upvotes: 4

Related Questions