Sidebar scroll position

[knowbody]

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.

[endiliey]

@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.

[yangshun]

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

[endiliey]

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

[yangshun]

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?

[endiliey]

@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

[yangshun]

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 < ***@***.***> 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 <#823 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABQRHaif3y0syRxcd8o8Uakds09P5ovtks5uC8COgaJpZM4U_InG> .

[endiliey]

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 😃

[knowbody]

It would be awesome!

…

On Tue, 3 Jul 2018 at 21:20, Endilie Yacop Sucipto ***@***.***> 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 <#823 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADoDp_XLm4l-InrZMKgeFCGkhh1RYS-hks5uC8QBgaJpZM4U_InG> .

[ghost]

This would be a wonderful feature.

[prithvi16]

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

[yangshun]

@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.

[prithvi16]

@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?

[yangshun]

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

[prithvi16]

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

[yangshun]

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.

[prithvi16]

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

[prithvi16]

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

[samg]

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.

[machikoyasuda]

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

[yangshun]

@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.

[prithvi16]

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 ***@***.***> 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 <#823 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKXRyQtyuyh8vEq2p85LuO5qMj751blVks5ukkUAgaJpZM4U_InG> .

-- - Prithviraj Sukale

[sunnykgupta]

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

[endiliey]

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