Add custom element option to WindowScroller

source/WindowScroller/WindowScroller.example.js

@@ -9,19 +9,27 @@ import AutoSizer from '../AutoSizer'
 import shallowCompare from 'react-addons-shallow-compare'
 import styles from './WindowScroller.example.css'
 
-export default class AutoSizerExample extends Component {
+export default class WindowScrollerExample extends Component {
   static contextTypes = {
-    list: PropTypes.instanceOf(Immutable.List).isRequired
+    list: PropTypes.instanceOf(Immutable.List).isRequired,
+    customElement: PropTypes.any,
+    isScrollingCustomElement: PropTypes.bool.isRequired,
+    setScrollingCustomElement: PropTypes.func
   }
 
   constructor (props) {
     super(props)
 
     this._rowRenderer = this._rowRenderer.bind(this)
+    this.onChangeCustomElementCheckbox = this.onChangeCustomElementCheckbox.bind(this)
+  }
+
+  onChangeCustomElementCheckbox (event) {
+    this.context.setScrollingCustomElement(event.target.checked)
   }
 
   render () {
-    const { list } = this.context
+    const { list, isScrollingCustomElement, customElement } = this.context
 
     return (
       <ContentBox>
@@ -36,8 +44,21 @@ export default class AutoSizerExample extends Component {
           and manages the window scroll to scroll through the list
         </ContentBoxParagraph>
 
+        <ContentBoxParagraph>
+          <label className={styles.checkboxLabel}>
+            <input
+              aria-label='Use custom element for scrolling'
+              className={styles.checkbox}
+              type='checkbox'
+              checked={isScrollingCustomElement}
+              onChange={this.onChangeCustomElementCheckbox}
+            />
+            Use custom element for scrolling
+          </label>
+        </ContentBoxParagraph>
+
         <div className={styles.WindowScrollerWrapper}>
-          <WindowScroller>
+          <WindowScroller scrollElement={isScrollingCustomElement ? customElement : null}>
             {({ height, isScrolling, scrollTop }) => (
               <AutoSizer disableHeight>
                 {({ width }) => (

source/WindowScroller/WindowScroller.js

@@ -3,6 +3,7 @@ import { Component, PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import shallowCompare from 'react-addons-shallow-compare'
 import { registerScrollListener, unregisterScrollListener } from './utils/onScroll'
+import { getVerticalScroll, getPositionFromTop, getHeight } from './utils/dimensions'
 
 export default class WindowScroller extends Component {
   static propTypes = {
@@ -13,6 +14,9 @@ export default class WindowScroller extends Component {
      */
     children: PropTypes.func.isRequired,
 
+    /** Element to attach scroll event listeners. Defaults to window. */
+    scrollElement: PropTypes.any,
+
     /** Callback to be invoked on-resize: ({ height }) */
     onResize: PropTypes.func.isRequired,
 
@@ -28,8 +32,8 @@ export default class WindowScroller extends Component {
   constructor (props) {
     super(props)
 
-    const height = typeof window !== 'undefined'
-      ? window.innerHeight
+    const height = typeof this.scrollElement !== 'undefined'
+      ? getHeight(this.scrollElement)
       : 0
 
     this.state = {
@@ -43,27 +47,31 @@ export default class WindowScroller extends Component {
     this._enablePointerEventsAfterDelayCallback = this._enablePointerEventsAfterDelayCallback.bind(this)
   }
 
-  componentDidMount () {
-    const { height } = this.state
+  // Can’t really use defaultProps for `window` without breaking server-side rendering
+  get scrollElement () {
+    return this.props.scrollElement || window
+  }
 
-    // Subtract documentElement top to handle edge-case where a user is navigating back (history) from an already-scrolled bage.
-    // In this case the body's top position will be a negative number and this element's top will be increased (by that amount).
-    this._positionFromTop =
-      ReactDOM.findDOMNode(this).getBoundingClientRect().top -
-      document.documentElement.getBoundingClientRect().top
+  componentDidMount () {
+    this._updateDimensions()
+    registerScrollListener(this, this.scrollElement)
+    window.addEventListener('resize', this._onResizeWindow, false)
+  }
 
-    if (height !== window.innerHeight) {
-      this.setState({
-        height: window.innerHeight
-      })
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.scrollElement && nextProps.scrollElement !== this.scrollElement) {
+      this._updateDimensions(nextProps.scrollElement)
+      unregisterScrollListener(this, this.scrollElement)
+      registerScrollListener(this, nextProps.scrollElement)
+    } else if (!nextProps.scrollElement && this.scrollElement !== window) {
+      this._updateDimensions(window)
+      unregisterScrollListener(this, this.scrollElement)
+      registerScrollListener(this, window)
     }
-
-    registerScrollListener(this)
-    window.addEventListener('resize', this._onResizeWindow, false)
   }
 
   componentWillUnmount () {
-    unregisterScrollListener(this)
+    unregisterScrollListener(this, this.scrollElement)
 
     window.removeEventListener('resize', this._onResizeWindow, false)
   }
@@ -83,6 +91,19 @@ export default class WindowScroller extends Component {
     return shallowCompare(this, nextProps, nextState)
   }
 
+  _updateDimensions (scrollElement = this.scrollElement) {
+    const { height } = this.state
+
+    this._positionFromTop = getPositionFromTop(ReactDOM.findDOMNode(this), scrollElement)
+
+    const newHeight = getHeight(scrollElement)
+    if (height !== newHeight) {
+      this.setState({
+        height: newHeight
+      })
+    }
+  }
+
   _enablePointerEventsAfterDelayCallback () {
     this.setState({
       isScrolling: false
@@ -92,7 +113,7 @@ export default class WindowScroller extends Component {
   _onResizeWindow (event) {
     const { onResize } = this.props
 
-    const height = window.innerHeight || 0
+    const height = getHeight(this.scrollElement)
 
     this.setState({ height })
 
@@ -102,10 +123,7 @@ export default class WindowScroller extends Component {
   _onScrollWindow (event) {
     const { onScroll } = this.props
 
-    // In IE10+ scrollY is undefined, so we replace that with the latter
-    const scrollY = ('scrollY' in window)
-      ? window.scrollY
-      : document.documentElement.scrollTop
+    const scrollY = getVerticalScroll(this.scrollElement)
 
     const scrollTop = Math.max(0, scrollY - this._positionFromTop)
 

source/WindowScroller/utils/dimensions.js

@@ -0,0 +1,30 @@
+/**
+ * Gets the vertical scroll amount of the element, accounting for IE compatibility
+ * and API differences between `window` and other DOM elements.
+ */
+export function getVerticalScroll (element) {
+  return element === window
+    ? (('scrollY' in window) ? window.scrollY : document.documentElement.scrollTop)
+    : element.scrollTop
+}
+
+/**
+ * Gets the height of the element, accounting for API differences between
+ * `window` and other DOM elements.
+ */
+export function getHeight (element) {
+  return element === window
+    ? window.innerHeight
+    : element.getBoundingClientRect().height
+}
+
+/**
+ * Gets the vertical position of an element within its scroll container.
+ * Elements that have been “scrolled past” return negative values.
+ * Handles edge-case where a user is navigating back (history) from an already-scrolled page.
+ * In this case the body’s top position will be a negative number and this element’s top will be increased (by that amount).
+ */
+export function getPositionFromTop (element, container) {
+  const containerElement = container === window ? document.documentElement : container
+  return element.getBoundingClientRect().top - containerElement.getBoundingClientRect().top
+}

source/WindowScroller/utils/onScroll.js

@@ -35,27 +35,26 @@ function enablePointerEventsAfterDelay () {
 }
 
 function onScrollWindow (event) {
-  if (originalBodyPointerEvents == null) {
+  if (event.currentTarget === window && originalBodyPointerEvents == null) {
     originalBodyPointerEvents = document.body.style.pointerEvents
 
     document.body.style.pointerEvents = 'none'
-
-    enablePointerEventsAfterDelay()
   }
+  enablePointerEventsAfterDelay()
   mountedInstances.forEach(component => component._onScrollWindow(event))
 }
 
-export function registerScrollListener (component) {
+export function registerScrollListener (component, element = window) {
   if (!mountedInstances.length) {
-    window.addEventListener('scroll', onScrollWindow)
+    element.addEventListener('scroll', onScrollWindow)
   }
   mountedInstances.push(component)
 }
 
-export function unregisterScrollListener (component) {
+export function unregisterScrollListener (component, element = window) {
   mountedInstances = mountedInstances.filter(c => (c !== component))
   if (!mountedInstances.length) {
-    window.removeEventListener('scroll', onScrollWindow)
+    element.removeEventListener('scroll', onScrollWindow)
     if (disablePointerEventsTimeoutId) {
       clearTimeout(disablePointerEventsTimeoutId)
       enablePointerEventsIfDisabled()

source/demo/Application.css

@@ -105,6 +105,11 @@ a {
   flex-wrap: wrap;
   justify-content: center;
 }
+.ScrollingBody {
+  composes: Body;
+  overflow: auto;
+  flex: 1 1 auto;
+}
 .column {
   display: flex;
   flex-direction: column;

source/demo/Application.js

@@ -42,16 +42,38 @@ const list = Immutable.List(generateRandomList())
 
 export default class Application extends Component {
   static childContextTypes = {
-    list: PropTypes.instanceOf(Immutable.List).isRequired
+    list: PropTypes.instanceOf(Immutable.List).isRequired,
+    customElement: PropTypes.any,
+    isScrollingCustomElement: PropTypes.bool.isRequired,
+    setScrollingCustomElement: PropTypes.func
   };
 
+  state = {
+    isScrollingCustomElement: false
+  }
+
+  constructor (props) {
+    super(props)
+    this.setScrollingCustomElement = this.setScrollingCustomElement.bind(this)
+  }
+
+  setScrollingCustomElement (custom) {
+    this.setState({ isScrollingCustomElement: custom })
+  }
+
   getChildContext () {
+    const { customElement, isScrollingCustomElement } = this.state
     return {
-      list
+      list,
+      customElement,
+      isScrollingCustomElement,
+      setScrollingCustomElement: this.setScrollingCustomElement
     }
   }
 
   render () {
+    const { isScrollingCustomElement } = this.state
+    const bodyStyle = isScrollingCustomElement ? styles.ScrollingBody : styles.Body
     return (
       <HashRouter>
         <div className={styles.demo}>
@@ -98,7 +120,7 @@ export default class Application extends Component {
             </div>
           </div>
 
-          <div className={styles.Body}>
+          <div className={bodyStyle} ref={e => this.setState({ customElement: e })}>
             <div className={styles.column}>
               <Match pattern='/wizard' component={Wizard} />
               {Object.keys(COMPONENT_EXAMPLES_MAP).map((route) => (

source/demo/ContentBox.css

@@ -1,5 +1,5 @@
 .ContentBox {
-  flex: 1;
+  flex: 1 0 auto;
   display: flex;
   flex-direction: column;
   background-color: #FFF;