diff --git a/src/handleScroll.ts b/src/handleScroll.ts index 001f542..bb02715 100644 --- a/src/handleScroll.ts +++ b/src/handleScroll.ts @@ -1,23 +1,23 @@ import { Axis } from './types'; -const elementCouldBeVScrolled = (node: HTMLElement): boolean => { - const styles = window.getComputedStyle(node); - - return ( - styles.overflowY !== 'hidden' && // not-not-scrollable - !(styles.overflowY === styles.overflowX && styles.overflowY === 'visible') // scrollable - ); -}; +const alwaysContainsScroll = (node: HTMLElement): boolean => + // textarea will always _contain_ scroll inside self. It only can be hidden + node.tagName === 'TEXTAREA'; -const elementCouldBeHScrolled = (node: HTMLElement): boolean => { +const elementCanBeScrolled = (node: HTMLElement, overflow: 'overflowX' | 'overflowY'): boolean => { const styles = window.getComputedStyle(node); return ( - styles.overflowX !== 'hidden' && // not-not-scrollable - !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible') // scrollable + // not-not-scrollable + styles[overflow] !== 'hidden' && + // contains scroll inside self + !(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === 'visible') ); }; +const elementCouldBeVScrolled = (node: HTMLElement): boolean => elementCanBeScrolled(node, 'overflowY'); +const elementCouldBeHScrolled = (node: HTMLElement): boolean => elementCanBeScrolled(node, 'overflowX'); + export const locationCouldBeScrolled = (axis: Axis, node: HTMLElement): boolean => { let current = node; diff --git a/stories/text-area.stories.tsx b/stories/text-area.stories.tsx new file mode 100644 index 0000000..9d36348 --- /dev/null +++ b/stories/text-area.stories.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import ReactRemoveScroll from '../src/Combination'; + +export const TextAreaOverflow = () => ( + +
+ +
+
+); + +export default { + title: 'textarea', +};