nextstrain / nextstrain.org

The Nextstrain website
https://nextstrain.org
GNU Affero General Public License v3.0
87 stars 49 forks source link

Remove `react-scrollable-anchor` #888

Open victorlin opened 4 weeks ago

victorlin commented 4 weeks ago

Context

This was first installed as a NPM dependency then vendored in ab6baf8bf60853bb90a4fa57e1cf087a121cb325. It's caused some problems such as #882 and there may be better alternatives.

Potential alternatives

From @ivan-aksamentov in https://github.com/nextstrain/nextstrain.org/issues/882#issuecomment-2141711954:

  1. For a proper smooth scrolling in modern browsers, I believe that <div id="#foo" /> + <Link href="#foo"/> (or <a href="#foo"/>) + some global CSS:

    html {
      scroll-behavior: smooth;
    }

    (moz, caniuse)

    should do without any packages.

  2. If a more complex imperative smooth scroll is needed, then there are many hook libraries having this functionality (example). Underneath they are typically using something like this, if need to scroll to element's ref:

    ref.current.scrollIntoView({ behavior: 'smooth' })

    or, if need to scroll to coordinates:

    window.scrollTo({
      top: 100,
      left: 100,
      behavior: "smooth",
    });