ngx-page-scroll directive not working in Angular 12 on Chrome specifically

[geetika-kathuria]

It was working well with Angular 9 on all major browsers.

Now, I'm using the latest "ngx-page-scroll" version on the Angular 12 app. It's working expectedly in Safari but not in chrome and firefox.
Can you please provide an update?

Thanks!

[bloodred17]

I'm having the same issue.

[dropclick]

Same here

[brendaaurelie]

same here!

[Nolanus]

Hi all,

I checked with angular 12 and ngx-page-scroll 7.0.5, scrolling via service and directive is working: https://stackblitz.com/edit/ngx-page-scroll-angular-12?file=src/app/app.component.html

Can you please provide some details about the problematic projects and the library usages where scrolling is not working as expected.

Thanks

[mehrdadg11]

same here

[brendaaurelie]

So it actually works perfectly on Safari, but when I use google chrome, it didn’t scroll to the target at all (It only scrolls like 1cm down). The console says “ngx-page-scroll-core.js:33 Scrolling not possible, as we can’t found the specified target”

[Nolanus]

Hi all,
can you please confirm, whether the css scroll-behavior of your document is not set to smooth? This is by default the case when using Bootstrap for example.

A smooth scroll behavior results in the browser to no immediately update the scroll position. NgxPageScroll detects this and assumes scrolling is not possible and stops further attempts.

The following code illustrates this:

console.log($('html').scrollTop); $('html').scrollTop = 1000; console.log($('html').scrollTop)

With scroll-behaviour = auto (default), the output is

0
1000

However, with scroll-behaviour = smooth the output in Chrome is

0
0

scroll-behavior is not supported by Safari yet (https://caniuse.com/?search=scroll-behavior).

[shadowboxingskills]

Same error with Chrome, Angular 12.2.10 and ngx-page-scroll 7.0.6,
As mentioned by @Nolanus, I checked the css scroll-behavior of my document and it was indeed set to smooth (from Bootstrap I guess). Now, I forced the scroll-behavior to auto (the opposite of smooth, as per Mozilla MDN web doc).
However, the problem remains: no scrolling at all, although I do not receive any warning/error.
Could you please point us in another direction to troubleshoot this one and fix this issue?

[zdenekhatak]

I had the same problem even without smooth scroll behavior

My target elements were inside of elements that were observed by IntersectionObserver. I guess Chrome somehow cannot get correct coordinates of the target.

After moving those scroll targets out of the items that were observed by IO, scrolling started working (before that, the scroll target position was 0, thus the page was scrolling to the top).

[MickL]

Had the same error: Was working in Safari but not in Chrome. I am using Bootstrap and yes, CSS smooth-scrolling was set to smooth. Disabled it with $enable-smooth-scroll: false;

Why doesnt this module dont work in Chrome when using smooth-scrolling? Can this be fixed?

[tim-deighton]

same here, no scrolling at all. I just get redirected to the home page. (ng 13).

[BrezoLarsen]

Hi! In my case it scrolls but attributes like pageScrollDuration works rarely, stops on the way, and pageScrollOffset doesn't seems to work (ng13)