JoeH

Yes no problem, I'll set it up this weekend.

I think I have found a workaround, we have a deadline soon so need to move fast on this, so we are just looking for a solution, I can then help after our deadline to try find the cause of this bug. If I add smoothTouch: 0.1 it seems to be a workaround. Can we use a smaller number than 0.1 because we prefer no change on touch screen devices?

The strange thing is that - window.scrollTo(0, 11120) seems to be the bottom of the page.

The behaviour is very strange, I get different results which seem random. I've just logged out each of the above and they are as follows: ScrollTrigger.maxScroll(window) = 11151 document.documentElement.scrollHeight = 12578 (document.body.scrollHeight) - (window.innerHeight) = 11151 document.documentElement.clientHeight = 1166 document.body.clientHeight = 12578

Removing normalizeScroll: true seems to fix the problem. However it breaks some scrollTriggers and Pins seem to go out of whack. No difference when removing ignoreMobileResize: true ScrollTrigger.maxScroll(window) is the same with ScrollSmoother enabled/disabled. window.scrollTo(0, VALUE) does NOT go to the end of the page

Here is my initiation: var smoother = ScrollSmoother.create({ smooth: 4, effects: true, normalizeScroll: true, ignoreMobileResize: true }) This problem is happening in browsers in which the address bar is always visible. Tried running ScrollTrigger.refresh() on a 1 second interval and that didn't help. It's going to take me a while to get a codepen setup I think, this issue only exists on one page on our website: I've tested it isn't related to the length of the page, I've removed all other JS unique to the problem page, this doesn't make any difference, and even removed individual sections from the problem page to see if they are causing the issue, in this case the gap at the bottom of the page between the end scroll position and the end of the page just gets smaller and smaller as more sections are removed. I've tried removing all the CSS from the problem page also and this doesn't help either, still unable to pinpoint where the issue is coming from.

Hi. In answer to your questions. 1. No 2. No 3. How can I do this please? I have run a setInterval function logging out -> window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop But when I scroll to the end the value is significantly less than document.documentElement.scrollHeight or document.body.scrollHeight, but not sure if I am comparing the correct things here. Some other observations: I can replicate the issue in my browser if I 'toggle device toolbar' i.e. inspect element and click on the mobile devices icon so that the touch screen mode is simulated. But as soon as I click anywhere on the page (at which touch-action: pan-x; is removed from body) and then try to scroll again, I am able to scroll to the appropriate position on the page.

Will try replicate in a codepen. Those 2 values are always the same when we have tested.

This issue is only affecting some devices, the ones we have found that have an issue are Samsung S22 Ultra using Chrome browser, Samsung browser and Firefox, and using an Amazon fire tablet with the Silk browser. The scrollbar does not reach the bottom of the page, not sure if this helps or not in diagnosing the issue, but the scroll bar will not move once it gets to a certain point (around 7/8 of the way down the page on this particular webpage), the point it reaches also changes if you refresh, allowing you to scroll slightly further. I have tried creating the smoother instance once the entire page has loaded and even adding a setTimeout function, but this does not work, and seems to break the pins and scroll triggers. I don't have a codepen although I can try set one up, or I can provide a link to the website in which it is happening on, but would prefer to not share this in public. Attached is a video showing the issue on mobile zzscrollsmoothissue-unbvedcq_W2YJTs12.mp4

Just noticed that it works with iframes too, what kind of wizardry did that involve?

Check out this question of mine where 2 methods of adding to React are provided. The solution from @OSUblake using contexts is the better one because it will allow children of page components to access the ScrollSmoother instance.

Yes I do wish for this. I think where it may not be desirable for some websites is on a refresh of a page where it is normal for the scroll position to persist.

I am not using Next.js. Although I guess your method could be used still by creating a custom component for links which uses the Link component, and looks for the scroll value.

Hi, The issue is when navigating between pages/routes in React, if you for instance click an internal link, then when you arrive on the next page, the scroll position that you were in when you click the link has persisted. On the current site I am working on I am not too fussed if the page always loads at the top no matter what, so I have just added: useEffect(() => { smoother.scrollTop(0) }, []); On every page component. However if this is not desirable I was wondering what the proper or best way of dealing with this issue might be.

Thanks for this, I'm still rather new with React so haven't done more than some brief reading up on context, I'm going to take a deeper look at it then re-review your code. I can think of a messy way to communicate back from the child component to then run the get method but hardly ideal.