Docusaurus: Sidebar scroll position

Created on 2 Jul 2018 · 23Comments · Source: facebook/docusaurus

Is this a bug report?

yes

Have you read the Contributing Guidelines on issues?

Yes

Environment

all versions

Expected Behavior

This is probabaly more of a feature request but could be also considered an UX bug.

I will explain on the RN docs.

So when the sidebar is quite long and I scroll to some item, for example AccessibilityInfo (in the API section) and if I click on it the AccessibilityInfo doc is loaded and the sidebar scrolls all the way up. if I would like to check some other doc from the API section I would have to scroll again. I would expect it to keep the sidebar scroll position as is.

good first issue claimed wontfix

Source

knowbody

🎉5 👍1

Most helpful comment

Here's something of a hack I put together to address this on my own docusaurus site.

I load the following code in a script, using the scripts parameter in siteConfig.js.

document.addEventListener('DOMContentLoaded', () => {
  // Find the active nav item in the sidebar
  const item = document.getElementsByClassName('navListItemActive')[0];
  if (!item) { return; }
  const bounding = item.getBoundingClientRect();
  if (
    bounding.top >= 0 &&
    bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
  ) {
    // Already visible.  Do nothing.
  } else {
    // Not visible.  Scroll sidebar.
    item.scrollIntoView({block: 'center', inline: 'nearest'});
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }
});

This code checks to see if

is an active nav item in the sidebar?
if so is it scrolled outside the viewport?
if so scroll the nav item into view and then scroll the document to the top (to avoid having other content not scrolled to the top.)

I'm posting it here in case this approach is useful to others, or if there's interest in integrating this as an option into the docusaurus core (until serverside SPA lands). I don't believe it will work in all browsers due to lack of support for scrollIntoView in all browsers, and I haven't done any cross browser testing yet outside of chrome.

samg on 13 Sep 2018

🎉3

All 23 comments

@knowbody
Mind to give more information/describe it more clearly ? Seems to me this is quite normal given that user loads a new html page when choosing a doc.

endiliey on 3 Jul 2018

If we convert Docusaurus into an server-side rendered SPA in v2, this problem would go away.

yangshun on 3 Jul 2018

❤1

Maybe it looks like SPA now because there is no trailing .html 😂

endiliey on 3 Jul 2018

😄1

The weird thing is that, Reason docs has the behavior that @knowbody wants. Try clicking on "Syntax Cheatsheet" from https://reasonml.github.io/docs/en/quickstart-javascript

I have yet to figure out why, but I suspect the browser does some sort of diff-ing between pages and only applies the changes 😲

Could it be because Reason docs has no footer?

yangshun on 3 Jul 2018

@yangshun
Seems like a javascript hack for me

https://github.com/MoOx/pjax

Pjax is a standalone JavaScript module that uses AJAX (XmlHttpRequest) and pushState() to deliver a fast browsing experience.

It allows you to completely transform the user experience of standard websites (server-side generated or static ones) to make them feel like they are browsing an app, especially for users with low bandwidth connection.

No more full page reloads. No more multiple HTTP requests.

https://github.com/reasonml/reasonml.github.io/blob/source/website/static/js/pjax-api.min.js

endiliey on 3 Jul 2018

Ah that's the trick. What an awesome trick. We can consider adding that to
core!

On Tue, Jul 3, 2018, 12:05 PM Endilie Yacop Sucipto <
[email protected]> wrote:

@yangshun https://github.com/yangshun
Seems like a javascript hack for me

https://github.com/MoOx/pjax

Pjax is a standalone JavaScript module that uses AJAX (XmlHttpRequest) and
pushState() to deliver a fast browsing experience.

It allows you to completely transform the user experience of standard
websites (server-side generated or static ones) to make them feel like they
are browsing an app, especially for users with low bandwidth connection.

No more full page reloads. No more multiple HTTP requests.

https://github.com/reasonml/reasonml.github.io/blob/source/website/static/js/pjax-api.min.js

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/Docusaurus/issues/823#issuecomment-402262182,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABQRHaif3y0syRxcd8o8Uakds09P5ovtks5uC8COgaJpZM4U_InG
.

yangshun on 3 Jul 2018

Oops reasonml is actually using the 2nd generation pjax https://github.com/falsandtru/pjax-api
Not really sure on the difference but i guess this pjax thing is quite cool.

Yeah I agree on adding it 😃

endiliey on 3 Jul 2018

It would be awesome!

On Tue, 3 Jul 2018 at 21:20, Endilie Yacop Sucipto notifications@github.com
wrote:

Oops reasonml is actually using the 2nd generation pjax
https://github.com/falsandtru/pjax-api
Not really sure on the difference but i guess this pjax thing is quite
cool.

Yeah I agree on adding it 😃

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/Docusaurus/issues/823#issuecomment-402265884,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADoDp_XLm4l-InrZMKgeFCGkhh1RYS-hks5uC8QBgaJpZM4U_InG
.

knowbody on 3 Jul 2018

This would be a wonderful feature.

ghost on 15 Jul 2018

Can I take this up? I am using this for a personal project and seriously need this.

prithvi16 on 22 Aug 2018

👍2

@prithvi16 it's yours!

I've added an "issue-claimed" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

I'll check in with you periodically so that we can keep the task updated with the progress.

yangshun on 22 Aug 2018

@yangshun Thanks!

So how do you want me to do this? Should I use Pjax hack used by https://github.com/reasonml/reasonml.github.io/blob/source/website/static/js/pjax-api.min.js

Or something else?

prithvi16 on 22 Aug 2018

Yes ReasonML's way looks good. If you can think of even better ways that would be appreciated.

yangshun on 22 Aug 2018

👍1

Here's my proposal :
Store scroll location in local storage when user scrolls
and retrieve it on page reload.

prithvi16 on 22 Aug 2018

Store scroll location in local storage when user scrolls and retrieve it on page reload.

What if someone opens multiple pages of Docusaurus in the same browser? It's not uncommon to right click -> open in new tab when browsing documentation.

yangshun on 22 Aug 2018

Yes. :smile: . I will think of something else.
Do you have anything in mind?

prithvi16 on 22 Aug 2018

Should I go ahead with adding Pjax to Docusaurus @yangshun ?

prithvi16 on 10 Sep 2018

👍2

Here's something of a hack I put together to address this on my own docusaurus site.

I load the following code in a script, using the scripts parameter in siteConfig.js.

document.addEventListener('DOMContentLoaded', () => {
  // Find the active nav item in the sidebar
  const item = document.getElementsByClassName('navListItemActive')[0];
  if (!item) { return; }
  const bounding = item.getBoundingClientRect();
  if (
    bounding.top >= 0 &&
    bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
  ) {
    // Already visible.  Do nothing.
  } else {
    // Not visible.  Scroll sidebar.
    item.scrollIntoView({block: 'center', inline: 'nearest'});
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }
});

This code checks to see if

is an active nav item in the sidebar?
if so is it scrolled outside the viewport?
if so scroll the nav item into view and then scroll the document to the top (to avoid having other content not scrolled to the top.)

samg on 13 Sep 2018

🎉3

@samg Thank you for your tip! 🎉 I am using it here: https://github.com/reactioncommerce/reaction-docs/pull/686, scrolling through over 130+ docs or so. Great to learn about https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

machikoyasuda on 10 Oct 2018

@prithvi16 Sorry for the late response. I think making pjax an opt-in feature would be really cool! Not sure how much work it involves but if it can be easily turned off/on we're keen to have it. Otherwise, the hack/tip by @samg works ok as well.

yangshun on 13 Oct 2018

Okay. Thank you for the response. Will submit a PR by the end of the week.

On Sun, Oct 14, 2018 at 1:24 AM Yangshun Tay notifications@github.com
wrote:

@prithvi16 https://github.com/prithvi16 Sorry for the late response. I
think making pjax an opt-in feature would be really cool! Not sure how much
work it involves but if it can be easily turned off/on we're keen to have
it. Otherwise, the hack/tip by @samg https://github.com/samg works ok
as well.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/Docusaurus/issues/823#issuecomment-429570504,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AKXRyQtyuyh8vEq2p85LuO5qMj751blVks5ukkUAgaJpZM4U_InG
.

Prithviraj Sukale

prithvi16 on 14 Oct 2018

@yangshun - I'm kind of available to pick this up immediately. Unless it has already been taken up and closed without closing the thread.

sunnykgupta on 29 Jan 2019

👍1

Closing due to stale. Please use the suggested workaround on 1.x. It will come by default on next major version. See https://docusaurus-2.netlify.com for WIP

endiliey on 14 May 2019

Was this page helpful?

0 / 5 - 0 ratings