Skip to content

Commit

Permalink
Fix overscroll issues locking scroll up on long pages. (#10227)
Browse files Browse the repository at this point in the history
This, I think, fixes #8603.

I wasn't able to reproduce the exact issue, but I was able to reproduce a different one which I think is the same minus some browser behavior differences.

Essentially, when you don't scroll the `body` but instead scroll an element, once you've scrolled to the end of that element, pause, and then try to scroll further, browsers now try to scroll the _parent_ element, in this case `body`. But because that isn't scrollable, some browsers apply an "overscroll bounce", others just prevent scrolling, even upwards.

Steps to reproduce:

1. Have a page with enough content to create a scrollbar.
2. Scroll to the very end of that content.
3. Hold a brief pause in scrolling.
4. Now in one motion first scroll downwards and then immediately start scrolling upwards.

Observe that you're not scrolling anywhere, or you're invoking overscroll bounces.

Step 4 is crucial — it is BECAUSE we start by scrolling _downwards_ that the browser decides to try and scroll the body element instead of the element we mean to scroll (`.edit-post-layout__content`), and because the body can't be scrolled, this is causing the issue.

This PR fixes that.
  • Loading branch information
jasmussen authored Sep 30, 2018
1 parent a5cad2b commit 0fe7d08
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions edit-post/components/layout/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,12 @@
overflow-y: auto;
-webkit-overflow-scrolling: touch;

// This rule ensures that if you've scrolled to the end of a container,
// then pause, then keep scrolling downwards, the browser doesn't try to scroll
// the parent element, usually invoking a "bounce" effect and then preventing you
// from scrolling upwards until you pause again.
overscroll-behavior-y: none;

.edit-post-visual-editor {
flex-grow: 1;

Expand Down

0 comments on commit 0fe7d08

Please sign in to comment.