[Feature request] Add overscroll options

[MarcelloTheArcane]

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

[leevigraham]

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);
        }),
    ],
};

[MarcelloTheArcane]

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

[lkbr]

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

[leevigraham]

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

Woops… updated my comment :)

[wadefletch]

Would this be accepted as a PR? Seems within the scope and style of Tailwind.

[MarcelloTheArcane]

@wadefletch Go ahead and make one!