@csstools/postcss-logical-overscroll-behavior
v2.0.0
Published
Use logical overscroll behavior properties and values in CSS
Downloads
3,513,907
Readme
PostCSS Logical Overscroll Behavior
npm install @csstools/postcss-logical-overscroll-behavior --save-dev
PostCSS Logical Overscroll Behavior lets you use overscroll-behavior-inline
and overscroll-behavior-block
properties following the CSS Overscroll Specification.
.inline {
overscroll-behavior-inline: auto;
}
.block {
overscroll-behavior-block: contain;
}
/* becomes */
.inline {
overscroll-behavior-x: auto;
}
.block {
overscroll-behavior-y: contain;
}
Usage
Add PostCSS Logical Overscroll Behavior to your project:
npm install postcss @csstools/postcss-logical-overscroll-behavior --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssLogicalOverscrollBehavior = require('@csstools/postcss-logical-overscroll-behavior');
postcss([
postcssLogicalOverscrollBehavior(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
Options
inlineDirection
The inlineDirection
option allows you to specify the direction of the inline axe. The default value is left-to-right
, which would match any latin language.
You should tweak this value so that it is specific to your language and writing mode.
postcssLogicalOverscrollBehavior({
inlineDirection: 'top-to-bottom'
})
.inline {
overscroll-behavior-inline: auto;
}
.block {
overscroll-behavior-block: contain;
}
/* becomes */
.inline {
overscroll-behavior-y: auto;
}
.block {
overscroll-behavior-x: contain;
}
Each direction must be one of the following:
top-to-bottom
bottom-to-top
left-to-right
right-to-left