{"id":16299434,"url":"https://github.com/rockchalkwushock/custom-scroll","last_synced_at":"2026-05-17T00:08:13.696Z","repository":{"id":103561883,"uuid":"96689642","full_name":"rockchalkwushock/custom-scroll","owner":"rockchalkwushock","description":"Repository for showing the current state of scrolling when using shallow routing in Next.js","archived":false,"fork":false,"pushed_at":"2017-07-09T16:16:55.000Z","size":881,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T19:52:10.593Z","etag":null,"topics":["nextjs","react-scroll"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rockchalkwushock.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-09T14:29:13.000Z","updated_at":"2017-07-09T16:28:39.000Z","dependencies_parsed_at":"2023-03-16T05:00:13.511Z","dependency_job_id":null,"html_url":"https://github.com/rockchalkwushock/custom-scroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rockchalkwushock/custom-scroll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rockchalkwushock%2Fcustom-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rockchalkwushock%2Fcustom-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rockchalkwushock%2Fcustom-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rockchalkwushock%2Fcustom-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rockchalkwushock","download_url":"https://codeload.github.com/rockchalkwushock/custom-scroll/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rockchalkwushock%2Fcustom-scroll/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002115,"owners_count":26083307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","react-scroll"],"created_at":"2024-10-10T20:47:58.944Z","updated_at":"2025-10-09T22:47:19.344Z","avatar_url":"https://github.com/rockchalkwushock.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Custom-Scroll\n\n## Usage\n\n```bash\ngit clone https://github.com/rockchalkwushock/custom-scroll.git\ncd custom scroll\nyarn\nyarn dev # application will run on localhost:3000\n```\n\n## The Problem\n\nCurrently with the way `next` is handling shallow routing a built-in function handles a scroll event to the hashed element:\n\n```js\n// Using shallow prop on Link.\nimport Link from 'next/link'\n\n\u003cLink href='#two' shallow\u003e\n  \u003ca\u003eLink to 2\u003c/a\u003e\n\u003c/Link\u003e\n\n// Using Router with shallow option\n_handleClick = (e, el) =\u003e {\n  e.preventDefault()\n  e.stopPropagation()\n\n  const href = `/#${el}`\n  Router.push(href, href, { shallow: true })\n}\n\n// Both methods will 'scroll' to this div.\n\u003cdiv id='two' /\u003e\n```\n\nThis works fine when just using `next`'s native scrolling event; however when creating custom scroll events or using a third party library like `react-scroll` there is no way to override the native scrolling event that is part of the shallow routing feature.\n\nThe following is an example of what a user can expect when trying to accomplish shallow routing and using a custom scroll event:\n\n![GIF](https://github.com/rockchalkwushock/custom-scroll/blob/master/img/custom-scroll-example.gif)\n\n## The Solution\n\nFeature add for user to pass custom scroll events to [`scrollToHash`](https://github.com/zeit/next.js/blob/v3-beta/lib/router/router.js#L265)\n\n```js\nRouter.push(href, href, { shallow: true, custom: { scroll: true, event: el =\u003e scrollTo(el) })\n\nasync change (method, _url, _as, options) {\n  // ...\n  if (this.onlyAHashChange(as)) {\n      this.changeState(method, url, as)\n      this.scrollToHash(as, options)\n      return\n    }\n  // ...\n  scrollToHash (as, options) {\n    const [ , hash ] = as.split('#')\n    const el = document.getElementById(hash)\n    // Check for customScroll event passed by user\n    // FIXME: Might be better to check that the key is present first to avoid 'undefined' issue.\n    if (options.custom.scroll) {\n      // If present use it as the scroll event on routing.\n      options.custom.event(el)\n    } else {\n      // If no customScroll present default to predefined\n      // scroll method provided by `next`.\n      el.scrollIntoView()\n    }\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frockchalkwushock%2Fcustom-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frockchalkwushock%2Fcustom-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frockchalkwushock%2Fcustom-scroll/lists"}