Overflowed Content Selector - tomhodgins/process-css-demo GitHub Wiki

A custom pseudo-class-style selector that allows authors to target an element when it has overflowed content in one or more directions.

<target>:--overflowed(<list of directions>)<descendants> { <list of declarations> }

• <target> is a CSS selector matching the element you want to test
• <list of directions> is a comma separated list of one or more options: top, right, bottom, left
• <descendants> is an optional second part of the selector to follow the element with :--overflowed()

The following selector would target a <textarea> element when it was scrolled so content was overflowed at the top:

textarea:--overflowed(top) {
  background: lime;
}

If we want to target multiple directions at once, we can add them using a comma separated list:

textarea:--overflowed(top, left) {
  color: hotpink;
}

The JS runtime that powers this feature normally reprocesses styles on load, resize, input, and click events on the window object. For this feature we may want to add additional event listeners to reprocess the styles on scroll events as well, either listening to document.scrollingElement or scroll on window, or by listening to the scroll event on whatever tags you're styling. For the examples above styling a <textarea> it might be smart to add something like this to your page as well:

document.querySelectorAll('textarea').forEach(tag =>
  tag.addEventListener('scroll', event =>
    window.dispatchEvent(new CustomEvent('reprocess'))
  )
)