Attachment 356972 Details for Bug 169509 – Hack to enable "overscroll-behavior: contain" style behavior

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:

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>

Actions: View

Attachments on bug 169509: 304142 | 356972