WebKit Bugzilla
Attachment 356972 Details for
Bug 169509
: If a scrollable layer is at its end position and user tries to scroll it with a down-scroll gesture, it will not scroll
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
Hack to enable "overscroll-behavior: contain" style behavior
testcase.html (text/html), 2.14 KB, created by
jonjohnjohnson
on 2018-12-10 10:59:28 PST
(
hide
)
Description:
Hack to enable "overscroll-behavior: contain" style behavior
Filename:
MIME Type:
Creator:
jonjohnjohnson
Created:
2018-12-10 10:59:28 PST
Size:
2.14 KB
patch
obsolete
><!DOCTYPE html> ><html> ><head> > <meta name="description" content="testcase" /> > <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1.0, user-scalable=no"> > <meta name="apple-mobile-web-app-capable" content="yes"> > <title>testcase</title> > <style> > :root { > --gut: 25px; > --buff: 75px; > } > html { > -webkit-text-size-adjust: none; > } > html, > body { > overflow: hidden; > } > > .wrap { > position: absolute; > top: var(--buff); > left: var(--buff); > right: var(--buff); > height: calc(75vh - var(--buff)); > > overflow: hidden; > overflow: visible; > } > .out { > width: calc(100% + (2 * var(--buff))); > position: relative; > left: calc(-1 * var(--buff)); > height: calc(100% + var(--gut)); > > overflow-x: scroll; > -webkit-overflow-scrolling: touch; > } > .in { > --sliver: 1px; > --sliver: 5px; > width: calc(100% + var(--sliver)); > height: calc(100% - var(--gut)); > display: flex; > } > .in::before, > .in::after { > content: ''; > display: block; > width: var(--buff); > background-color: rgba(255,0,0,.1); > } > .fixer { > position: -webkit-sticky; > position: sticky; > left: var(--buff); > right: var(--buff); > width: calc(100% - (2 * var(--buff)) - var(--sliver)); > overflow-y: scroll; > -webkit-overflow-scrolling: touch; > > > background-color: rgba(255,0,0,.5); > } > .well { > min-height: calc(100% + 5px); > display: block; > } > </style> ></head> ><body> > <div class="wrap"> > <div class="out"> > <div class="in"> > <div class="fixer"> > <div class="well">Scroll me up and down, even while already resting at scroll boundaries and see me never chain scrolling up to the viewport. If you scroll horizontally, you'll see the trick is that this vertical scroller is nested in a horizontal scroller that just barely overflows and has spacers around a sticky positioned element that provides the eventual vertical scroll container.</div> > </div> > </div> > </div> > </div> > ></body> ></html>
<!DOCTYPE html> <html> <head> <meta name="description" content="testcase" /> <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>testcase</title> <style> :root { --gut: 25px; --buff: 75px; } html { -webkit-text-size-adjust: none; } html, body { overflow: hidden; } .wrap { position: absolute; top: var(--buff); left: var(--buff); right: var(--buff); height: calc(75vh - var(--buff)); overflow: hidden; overflow: visible; } .out { width: calc(100% + (2 * var(--buff))); position: relative; left: calc(-1 * var(--buff)); height: calc(100% + var(--gut)); overflow-x: scroll; -webkit-overflow-scrolling: touch; } .in { --sliver: 1px; --sliver: 5px; width: calc(100% + var(--sliver)); height: calc(100% - var(--gut)); display: flex; } .in::before, .in::after { content: ''; display: block; width: var(--buff); background-color: rgba(255,0,0,.1); } .fixer { position: -webkit-sticky; position: sticky; left: var(--buff); right: var(--buff); width: calc(100% - (2 * var(--buff)) - var(--sliver)); overflow-y: scroll; -webkit-overflow-scrolling: touch; background-color: rgba(255,0,0,.5); } .well { min-height: calc(100% + 5px); display: block; } </style> </head> <body> <div class="wrap"> <div class="out"> <div class="in"> <div class="fixer"> <div class="well">Scroll me up and down, even while already resting at scroll boundaries and see me never chain scrolling up to the viewport. If you scroll horizontally, you'll see the trick is that this vertical scroller is nested in a horizontal scroller that just barely overflows and has spacers around a sticky positioned element that provides the eventual vertical scroll container.</div> </div> </div> </div> </div> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 169509
:
304142
| 356972