help: Prevent scrolling when cursor is on body.

When you hover above the navbar, the cursor focuses on the page
body and scrolls the entire page, breaking the positioning of the
fixed sidebar and page content.

We disable scrolling on the body but allow the sidebar and Markdown
content page elements to be scrolled to fix this bug.
This commit is contained in:
Cynthia Lin 2018-05-26 10:18:06 -07:00 committed by Tim Abbott
parent 3cc93fd721
commit 8ee034a41c
3 changed files with 10 additions and 0 deletions

View File

@ -207,4 +207,5 @@ function scrollToHash(container) {
update_page(html_map, path, container); update_page(html_map, path, container);
}); });
$('body').addClass('noscroll');
}()); }());

View File

@ -185,6 +185,8 @@ html {
.header { .header {
background-color: #fff; background-color: #fff;
position: fixed;
width: 100%;
} }
.header .top-links a, .header .top-links a,

View File

@ -2,6 +2,11 @@ body {
background-color: #fafafa; background-color: #fafafa;
} }
.noscroll {
overflow: hidden;
position: fixed;
}
.container-fluid { .container-fluid {
padding: 0px; padding: 0px;
min-height: 100%; min-height: 100%;
@ -117,6 +122,7 @@ body {
position: fixed; position: fixed;
width: 100vw; width: 100vw;
height: calc(100vh - 59px); height: calc(100vh - 59px);
margin-top: 59px;
left: 0px; left: 0px;
box-shadow: 0px -20px 50px rgba(0, 0, 0, 0.04); box-shadow: 0px -20px 50px rgba(0, 0, 0, 0.04);
@ -1926,6 +1932,7 @@ input.new-organization-button {
.app.help { .app.help {
position: absolute; position: absolute;
height: calc(100vh - 40px); height: calc(100vh - 40px);
margin-top: 39px;
} }
.app.help .sidebar { .app.help .sidebar {