Add onScrolled callback

README.md

@@ -1,6 +1,6 @@
 # react-overflow
 
-A React component that detects when it's overflowed by its content.
+A React component that detects when it's overflowed by its content. It can also tell you if you are at the edge of the scroll area.
 
 ## Installation
 
@@ -12,6 +12,8 @@ npm install --save react-overflow
 
 ## Usage
 
+Using the `onOverFlowChange` callback:
+
 ```jsx
 import { OverflowDetector } from 'react-overflow';
 
@@ -27,6 +29,30 @@ function handleOverflowChange(isOverflowed) {
 </OverflowDetector>
 ```
 
+Using the `onScrolled` callback:
+
+```jsx
+import { OverflowDetector } from 'react-overflow';
+
+class TextWithArrows extends React.Component {
+  state = { atTop: true, atBottom: true, atLeft: true, atRight: true };
+  handleScrolled = pos => this.setState(pos);
+  render() {
+    const { text } = this.props;
+    const { atTop, atBottom, atLeft, atRight } = this.state;
+    return (
+      <ConstrainedTextDiv>
+        <OverflowDetector onScrolled={this.handleScrolled}>
+          {!atTop && <UpArrow />}
+          {text}
+          {!atBottom && <DownArrow />}
+        </OverflowDetector>
+      </ConstrainedTextDiv>
+    );
+  }
+}
+```
+
 ## License
 
 [MIT](https://github.com/nickuraltsev/react-overflow/blob/master/LICENSE)

src/OverflowDetector.jsx

@@ -17,8 +17,15 @@ export default class OverflowDetector extends Component {
     super(props);
     this.isOverflowed = false;
     this.domElement = null;
+    this.scrollState = {
+      atTop: true,
+      atBottom: true,
+      atLeft: true,
+      atRight: true,
+    };
     this.setDOMElement = this.setDOMElement.bind(this);
     this.checkOverflow = this.checkOverflow.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
   }
 
   componentDidMount() {
@@ -43,16 +50,48 @@ export default class OverflowDetector extends Component {
       if (this.props.onOverflowChange) {
         this.props.onOverflowChange(isOverflowed);
       }
+      if (!isOverflowed) {
+        this.handleScroll();
+      }
+    }
+  }
+
+  handleScroll() {
+    const {
+      clientHeight,
+      clientWidth,
+      scrollTop,
+      scrollLeft,
+      scrollHeight,
+      scrollWidth,
+    } = this.domElement;
+    const atTop = scrollTop === 0;
+    const atBottom = scrollTop + clientHeight === scrollHeight;
+    const atLeft = scrollLeft === 0;
+    const atRight = scrollLeft + clientWidth === scrollWidth;
+    const s = this.scrollState;
+    if (
+      s.atTop !== atTop ||
+      s.atBottom !== atBottom ||
+      s.atLeft !== atLeft ||
+      s.atRight !== atRight
+    ) {
+      const scrollState = { atTop, atBottom, atLeft, atRight };
+      this.scrollState = scrollState;
+      this.props.onScrolled(scrollState);
     }
   }
 
   render() {
-    const { style, className, children } = this.props;
+    const { style, className, children, onScrolled } = this.props;
+    const onScroll =
+      this.isOverflowed && onScrolled ? this.handleScroll : undefined;
     return (
       <div
         ref={this.setDOMElement}
         style={{ ...style, position: 'relative' }}
         className={className}
+        onScroll={onScroll}
       >
         {children}
         <ResizeDetector onResize={this.checkOverflow} />