Tailwindcss: [Feature request] Add overscroll options

Created on 24 Jun 2020 · 6Comments · Source: tailwindlabs/tailwindcss

On mobile UIs, you can have something called overscroll-behaviour 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.

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:

.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;
}

Source

MarcelloTheArcane

👍3

Most helpful comment

Thanks @leevigraham. Fyi, for anyone trying to get this to work, the CSS property is behavior rather than behaviour.

Woops… updated my comment :)

leevigraham on 13 Jul 2020

😄1 👍1

All 6 comments

This can easily be added as a plugin in the short term:

const plugin = require('tailwindcss/plugin');

module.exports = {
    plugins: [
        plugin(function ({ addUtilities }) {
            const newUtilities = {
                '.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',
                },
            };
            addUtilities(newUtilities);
        }),
    ],
};

leevigraham on 8 Jul 2020

🎉2

@leevigraham That's fantastic! I wasn't sure how to structure the plugin personally.

MarcelloTheArcane on 8 Jul 2020

Thanks @leevigraham. Fyi, for anyone trying to get this to work, the CSS property is behavior rather than behaviour.