Repository navigation
[documentation site] Back button does not scroll the page (solution included) #6751
Description
NOTE: This happens in a computer view (big screen).
How to reproduce (at least in Chrome):
- Open (for example) https://nodejs.org/api/http.html
- Within the "Table of Content", click in
Class: http.ClientRequest. - It will scroll down to the corresponding class definition, and the window location becomes
https://nodejs.org/api/http.html#http_class_http_clientrequest - Now press the browser Back button.
- Window location becomes
https://nodejs.org/api/http.htmlagain, but the page was not scrolled up.
This is because <html> and <body> have both height: 100% (this is OK), but then there is a main container <div id="content"> which also has height: 100%, and there is where the problem is:
By having a container with height: 100% within the body, the scroll is not done on the body itself, but on the container. And unfortunately the Back button does not scroll back a div (but just the body element).
The solution is to remove the height: 100% of the <div id="content"> (you can test it by removing such a CSS property in the browser inspector), but of course that requires changes for the left menu to remain fixed when the page is scrolled. Such a change just requires replacing position: absolute with position: fixed in the <div id="column2">.
To summarize:
- In
<div id="content">removeheight: 100%. - In
<div id="column2">setposition: fixed.
Activity
[-]Back button does not scroll the page[/-][+][documentation site] Back button does not scroll the page (solution included)[/+]ibc commentedon May 13, 2016
The only disadvantage of the above solution is that, when scrolling the left menu and reaching the end of it, the main page is scrolled. This is how the web works however. But I've a mini library for that:
https://github.com/ibc/dontscrollthebody
:)
mscdex commentedon May 13, 2016
/cc @nodejs/documentation
ibc commentedon May 13, 2016
Should I report this issue in https://github.com/nodejs/nodejs.org instead?
Note that "About this Documentation" clearly states that:
(which points to this project)
lpinca commentedon May 14, 2016
@ibc does this pr #6641 fixes the issue?
silverwind commentedon May 15, 2016
#6641 should fix this, which I'll land shortly.
silverwind commentedon May 15, 2016
I had a similar hack planned in #6641, but decided to not mess with the scrolling.
doc: fix issues related to page scrolling
ibc commentedon May 15, 2016
Yes, #6641 seems to fix it.
doc: fix issues related to page scrolling
doc: fix issues related to page scrolling
doc: fix issues related to page scrolling
doc: fix issues related to page scrolling