Setting scrollTop does not work while momentum scroll is ongoing. But there is a workaround.

1 minute read


iOS Safari


  • User gesture
    • Do momentum(aka inertial) scrolling
  • code
    • Fire onScroll event as long as inertial momentum scrolling


  • Setting scrollTop does not work while momentum scroll is ongoing
    • Manually setting scrollTop is impossible while momentum scrolling
    • So events that have dependencies on scrollTop value and manipulate scrollTop at the same time could work incorrectly
    • Momentum scroll overrides updating scrollTop when scrolling time is too long


  • code
    const functionOnIos = () => { = 'hidden'; // disable scrolling
      whatYouWantToDo(); = 'auto'; // enable scrolling
  • description
    • There is not any perfect solution for the problem. Because Javascript sandbox cannot control momentum scroll.
    • But workaround is here. why?
      • While momentum scroll is ongoing,
      • Before applying the solution
        • ScrollTop value is changed in real time while momentum scrolling is ongoing
        • The changed scrollTop value make onScrollEvent be fired as soon as possible
        • When momentum is too strong, updating scrollTop is not fired or overrided by momentum scroll moving
      • After applying the solution
        • The onScrollEvent will be fired immediately because scrolling is disabled


  • If you want to fire codes that is just do something regardless of a scroll position, use setTimeout(() => doSomething(), 0). It will be fired after scroll rendering.
  • Must check whether it is iOS or iPadOS.

create: 20210809

last update: 20230721





Leave a comment