docs: Fix documentation and browser back button issue

[pittyplatsch]

I couldn't find any other issue or discussion thread but I'm new to Node and therefore spending a lot of time with the docs. It's quite annoying that the browser back button is not working when one has jumped to an anchor within a page and then wanting to go back to the index with the browser back functionality. Removing the suggested line fixes the issue. I don't really know what it's good for, so if anyone could tell me and propose a different fix I'd be happy too.

[evanlucas]

Thanks for the contribution! This actually breaks scrolling completely for me in Chrome on OS X, so I think we will have to find a different solution.

[pittyplatsch]

@evanlucas Indeed, for me (FF on Ubuntu) too. Didn't even notice that, was just happy that the browser behaviour was as expected.

[pittyplatsch]

Some more changes. Scrolling now functional again, sorry for my earlier ignorance.

[Fishrock123]

cc @nodejs/documentation

[silverwind]

Looks to be working in Firefox, Chrome and Safari on OS X. Will test on Windows later.

[jasnell]

LGTM

[silverwind]

@pittyplatsch tested in IE10, Chrome, Firefox on Windows and noticed one regression: scrolling the sidebar all the way to the bottom in Chrome (all platforms) and IE "bubbles" the scroll to the main section.

[pittyplatsch]

@silverwind I see what you mean but don't think it's unnatural or unexpected behaviour that the scrolling continues in the main div of the page if an end is reached in the navigation div. Having the back button not working however is unexpected.

[silverwind]

@pittyplatsch FWIW, the scrolling issue was reported as a bug here, I don't really want to introduce it again. Is it not possible to fix both issues?

[silverwind]

Maybe something like this is in order to prevent the scroll "bubbling". The DOMMouseScroll isn't strictly necessary as only Firefox uses that event and it isn't affected right now, but I guess it won't hurt.

function scroll(e) {
  var delta = (e.type === 'mousewheel') ? e.wheelDelta : e.detail * -40;
  if (delta < 0 && (this.scrollHeight - this.offsetHeight - this.scrollTop) <= 0) {
    this.scrollTop = this.scrollHeight;
    e.preventDefault();
  } else if (delta > 0 && delta > this.scrollTop) {
    this.scrollTop = 0;
    e.preventDefault();
  }
}
document.getElementById('column2').addEventListener('mousewheel', scroll);
document.getElementById('column2').addEventListener('DOMMouseScroll', scroll);

[stevemao]

cc @nodejs/website

[stevemao]

@pittyplatsch interesting. I didn't know css position would break history buttons with anchor links. Any references on this?

[pittyplatsch]

@silverwind Thanks for linking nodejs/nodejs.org#513 – interesting insights. I personally have no problem with the bubbling, on FF there's a delay which seems like a nice compromise. I too found people discussing using JS to influence the browsers default behaviour (http://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element) and also browser developers are discussing it: https://bugs.chromium.org/p/chromium/issues/detail?id=162179. Personally I don't think it's necessary.

@stevemao Only came across it in this particular case. It drives me crazy and I was surprised it hasn't been mentioned before by someone else.

[jasnell]

What's the status on this one?

[silverwind]

I'd sign it off if a solution to the scroll bubble issue is provided, be it #5716 (comment) or (preferably) a CSS only solution.

[pittyplatsch]

Sorry, I won't fix the bubbling. Take it as it is or feel free to close it...

[silverwind]

In that case, I'll have to close it as it fixes one issue, but regresses another. The issue is not forgotten, thought. I have a few minor tweaks to docs CSS in mind, and I'll try to work out something regarding this problem.