Incorrect top:0 after Reload

[blitzve0]

SUMMARY
Hi, Unfortunately Another Issue for Me. Sometimes when I reload Page then the top position becomes weird. I have attached video of the issue.

EXPECTED BEHAVIOUR
Top Position resets to 0 on Reload

MY IMPLEMENTATION

import { useLayoutEffect, useEffect, useRef } from 'react'
import { useCheckMobile } from '@/tools/hooks'
import { useRouter } from 'next/router'
import Scrollbar from 'smooth-scrollbar'
import ScrollTriggerPlugin from '@/math/scrollTriggerPlugin'
import EdgeDampingPlugin from '@/math/edgeDampingPlugin'
import MobileSpeedPlugin from '@/math/mobileSpeedPlugin'
import MobileTouchPlugin from '@/math/mobileTouchPlugin'

//@ Edge Damping ScrollTrigger and Mobile Plugin for Scrollbar
Scrollbar.use(EdgeDampingPlugin, ScrollTriggerPlugin, MobileSpeedPlugin, MobileTouchPlugin)

//& Smooth Scroll with Edge Damping
const SmoothScroll = (stickyStuff, eraser) => {
  /// Prop Definitions
  /// 1: stickyStuff - Array of Refs for Fixing Elements on Screen - from 'PageEssentials'
  /// 2: eraser - Canvas Ref from Canvas Eraser Block - from 'CanvasEraser'

  const router = useRouter()
  const offsetY = useRef(null)
  const smoothscrollRef = useRef(null)

  //$ Check if Mobile or Desktop
  const mobile = useCheckMobile()

  //$ Run on Page Load
  useLayoutEffect(() => {
    const view = document.body //` Declare View Reference
    const settings = {
      damping: 0.075,
      renderByPixels: true,
      delegateTo: document,
      alwaysShowTracks: false,
      continuousScrolling: false,
    } //` Options

    //$ Initialize with View and Settings
    const smoothscroll = view && Scrollbar.init(view, settings)
    smoothscrollRef.current = smoothscroll
    const cursorRef = document.getElementById('cursor-id')

    //$ Set Fixed Position for Cursor
    smoothscroll.addListener(({ offset }) => {
      //@ Set Mouse Fixed Position only if on Desktop
      offsetY.current = offset.y + 'px'
      if (!mobile) {
        cursorRef.style.top = offset.y + 'px'
        cursorRef.style.left = offset.x + 'px'
      }
    })

    //$ Set Fixed Position for All Other Sticky Elements
    if (stickyStuff?.length) {
      /// Description
      /// [0] : menuRef - Menu Reference
      /// [1] : menuButtonRef - Menu Button Reference
      /// [2] : contactButtonRef - Contact Button Reference
      /// [3] : showreelRef - Showreel Reference
      /// [4] : pageTransitionRef1 - Page Transition Panels Reference
      /// [5] : pageTransitionRef2 - Page Transition Panels Reference
      //@ Set Fixed Position for Menu Initially
      if (stickyStuff[0].current) stickyStuff[0].current.style.top = offsetY.current
      if (stickyStuff[3].current) stickyStuff[3].current.style.top = offsetY.current
      //@ Set Fixed Position for Other Items based on Scroll
      smoothscroll.addListener(({ offset }) => {
        if (stickyStuff[0].current) stickyStuff[0].current.style.top = offset.y + 'px'
        if (stickyStuff[1].current) stickyStuff[1].current.style.top = offset.y + 'px'
        if (stickyStuff[2].current) stickyStuff[2].current.style.bottom = -offset.y + 'px'
        if (stickyStuff[3].current) stickyStuff[3].current.style.top = offset.y + 'px'
      })
      //@ Disable Scrollbar Hover When Hovering on Menu
      stickyStuff[1].current.addEventListener('mouseenter', () => {
        smoothscroll.track.xAxis.element.style.pointerEvents = smoothscroll.track.yAxis.element.style.pointerEvents = 'none'
      })

      stickyStuff[1].current.addEventListener('mouseleave', () => {
        smoothscroll.track.xAxis.element.style.pointerEvents = smoothscroll.track.yAxis.element.style.pointerEvents = ''
      })
    }

    //@ Set Top Position for Canvas Eraser
    eraser &&
      smoothscroll.addListener(({ offset }) => {
        eraser.current = offset.y
      })
  }, [eraser, stickyStuff, mobile, router])

  useEffect(() => {
    smoothscrollRef.current && smoothscrollRef.current.setPosition(0, 0)
  }, [router, smoothscrollRef])
}

export default SmoothScroll

bug.mp4

[idiotWu]

It seems that the browser preserves the scrolling offsets when reloading the page. You can try resetting the scroll position before initializing the scrollbar:

window.scrollTo(0, 0)
Scrollbar.init(...)

[blitzve0]

Unfortunately, that Didn't Work but I found another solution on StackOverflow. Setting This CSS property on body solved the issue

body {
overflow-anchor: none;
}

Edit : I found out this was only happening in GOOGLE CHROME

[idiotWu]

Hadn't known that property! Maybe we should add it to the default styles in the next major release.

[blitzve0]

Hadn't known that property! Maybe we should add it to the default styles in the next major release.

Yes That would be great

[blitzve0]

For Anyone in future having this problem, Just do this in CSS

body {
  overflow-anchor: none;
}