Repository: tailwindlabs/tailwindcss (ts)

Issue:
[Feature request] Add overscroll options
On mobile UIs, you can have something called [`overscroll-behaviour`](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) which can help on removing 'pull to refresh' when scrolling.

It is also useful for chat boxes or other contained UI elements - see [this MDN example](https://mdn.github.io/css-examples/overscroll-behavior/).

It would be really handy to add this to Tailwind!

### Values
- `auto` - The default scroll overflow behavior occurs as normal.
- `contain` - Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll.
- `none` - No scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.

There is `overscroll-behaviour`, `overscroll-behaviour-y` and `overscroll-behaviour-x`.

### Proposed API

Add the following class definitions:

```css
.overscroll-auto {
  overscroll-behaviour: auto;
}
.overscroll-contain {
  overscroll-behaviour: contain;
}
.overscroll-none {
  overscroll-behaviour: none;
}

.overscroll-y-auto {
  overscroll-behaviour-y: auto;
}
.overscroll-y-contain {
  overscroll-behaviour-y: contain;
}
.overscroll-y-none {
  overscroll-behaviour-y: none;
}

.overscroll-x-auto {
  overscroll-behaviour-x: auto;
}
.overscroll-x-contain {
  overscroll-behaviour-x: contain;
}
.overscroll-x-none {
  overscroll-behaviour-x: none;
}
```

Pull request:
Add overscroll features (Resolves #1957)
Hi everyone!

This PR adds a set of tailwind classes for the [overscroll-behavior](https://drafts.csswg.org/css-overscroll-1/) css class. It's a relatively new addition (early this year), but it's supported in all major browsers except Safari ([77.55% of all users](https://caniuse.com/#feat=css-overscroll-behavior)). This closes issue #1957 and uses the classes created by @MarcelloTheArcane.

**Example Use**
```
<body class='overscroll-x-none'>
    <p>Overscroll example</p>
</body>
```

This is my first contribution to Tailwind and I believe I added tests correctly (I modeled them after what's used for the overflow plugin) but please correct me if they're incorrect. I'm also unsure the process for adding new features to the docs, though I'd be happy to contribute there as well.

Patch:
diff --git a/src/corePlugins.js b/src/corePlugins.js
index f1211ba3..b263d1fc 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -46,6 +46,7 @@ import objectPosition from './plugins/objectPosition'
 import opacity from './plugins/opacity'
 import outline from './plugins/outline'
 import overflow from './plugins/overflow'
+import overscroll from './plugins/overscroll'
 import padding from './plugins/padding'
 import placeholderColor from './plugins/placeholderColor'
 import pointerEvents from './plugins/pointerEvents'
@@ -154,6 +155,7 @@ export default function({ corePlugins: corePluginConfig }) {
     opacity,
     outline,
     overflow,
+    overscroll,
     padding,
     placeholderColor,
     placeholderOpacity,
diff --git a/src/plugins/overscroll.js b/src/plugins/overscroll.js
new file mode 100644
index 00000000..5ef010ae
--- /dev/null
+++ b/src/plugins/overscroll.js
@@ -0,0 +1,18 @@
+export default function() {
+  return function({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.overscroll-auto': { 'overscroll-behavior': 'auto' },
+        '.overscroll-contain': { 'overscroll-behavior': 'contain' },
+        '.overscroll-none': { 'overscroll-behavior': 'none' },
+        '.overscroll-y-auto': { 'overscroll-behavior-y': 'auto' },
+        '.overscroll-y-contain': { 'overscroll-behavior-y': 'contain' },
+        '.overscroll-y-none': { 'overscroll-behavior-y': 'none' },
+        '.overscroll-x-auto': { 'overscroll-behavior-x': 'auto' },
+        '.overscroll-x-contain': { 'overscroll-behavior-x': 'contain' },
+        '.overscroll-x-none': { 'overscroll-behavior-x': 'none' },
+      },
+      variants('overscroll')
+    )
+  }
+}


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css
index 760a22cf..3ce8416b 100644
--- a/__tests__/fixtures/tailwind-output-ie11.css
+++ b/__tests__/fixtures/tailwind-output-ie11.css
@@ -6089,6 +6089,42 @@ video {
   -webkit-overflow-scrolling: auto;
 }
 
+.overscroll-auto {
+  overscroll-behavior: auto;
+}
+
+.overscroll-contain {
+  overscroll-behavior: contain;
+}
+
+.overscroll-none {
+  overscroll-behavior: none;
+}
+
+.overscroll-y-auto {
+  overscroll-behavior-y: auto;
+}
+
+.overscroll-y-contain {
+  overscroll-behavior-y: contain;
+}
+
+.overscroll-y-none {
+  overscroll-behavior-y: none;
+}
+
+.overscroll-x-auto {
+  overscroll-behavior-x: auto;
+}
+
+.overscroll-x-contain {
+  overscroll-behavior-x: contain;
+}
+
+.overscroll-x-none {
+  overscroll-behavior-x: none;
+}
+
 .p-0 {
   padding: 0;
 }
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 0949bc69..b53ef9d1 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -7769,6 +7769,42 @@ video {
   -webkit-overflow-scrolling: auto !important;
 }
 
+.overscroll-auto {
+  overscroll-behavior: auto !important;
+}
+
+.overscroll-contain {
+  overscroll-behavior: contain !important;
+}
+
+.overscroll-none {
+  overscroll-behavior: none !important;
+}
+
+.overscroll-y-auto {
+  overscroll-behavior-y: auto !important;
+}
+
+.overscroll-y-contain {
+  overscroll-behavior-y: contain !important;
+}
+
+.overscroll-y-none {
+  overscroll-behavior-y: none !important;
+}
+
+.overscroll-x-auto {
+  overscroll-behavior-x: auto !important;
+}
+
+.overscroll-x-contain {
+  overscroll-behavior-x: contain !important;
+}
+
+.overscroll-x-none {
+  overscroll-behavior-x: none !important;
+}
+
 .p-0 {
   padding: 0 !important;
 }
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index cc84a1b6..2caa2d39 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -6341,6 +6341,42 @@ video {
   -webkit-overflow-scrolling: auto;
 }
 
+.overscroll-auto {
+  overscroll-behavior: auto;
+}
+
+.overscroll-contain {
+  overscroll-behavior: contain;
+}
+
+.overscroll-none {
+  overscroll-behavior: none;
+}
+
+.overscroll-y-auto {
+  overscroll-behavior-y: auto;
+}
+
+.overscroll-y-contain {
+  overscroll-behavior-y: contain;
+}
+
+.overscroll-y-none {
+  overscroll-behavior-y: none;
+}
+
+.overscroll-x-auto {
+  overscroll-behavior-x: auto;
+}
+
+.overscroll-x-contain {
+  overscroll-behavior-x: contain;
+}
+
+.overscroll-x-none {
+  overscroll-behavior-x: none;
+}
+
 .p-0 {
   padding: 0;
 }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 97596e0b..7eb5697b 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -7769,6 +7769,42 @@ video {
   -webkit-overflow-scrolling: auto;
 }
 
+.overscroll-auto {
+  overscroll-behavior: auto;
+}
+
+.overscroll-contain {
+  overscroll-behavior: contain;
+}
+
+.overscroll-none {
+  overscroll-behavior: none;
+}
+
+.overscroll-y-auto {
+  overscroll-behavior-y: auto;
+}
+
+.overscroll-y-contain {
+  overscroll-behavior-y: contain;
+}
+
+.overscroll-y-none {
+  overscroll-behavior-y: none;
+}
+
+.overscroll-x-auto {
+  overscroll-behavior-x: auto;
+}
+
+.overscroll-x-contain {
+  overscroll-behavior-x: contain;
+}
+
+.overscroll-x-none {
+  overscroll-behavior-x: none;
+}
+
 .p-0 {
   padding: 0;
 }