Add custom element option to WindowScroller

package.json

@@ -85,6 +85,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.2.3",
+    "autoprefixer-loader": "^3.2.0",
     "babel-cli": "6.8.0",
     "babel-core": "^6.5.1",
     "babel-eslint": "^6.0.4",

source/WindowScroller/WindowScroller.css

@@ -0,0 +1,3 @@
+.disabled > * {
+  pointer-events: none !important;
+}

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'
+              value={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()
+      unregisterScrollListener(this, this.scrollElement)
+      registerScrollListener(this, nextProps.scrollElement)
+    } else if (!nextProps.scrollElement && this.scrollElement !== window) {
+      this._updateDimensions()
+      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 () {
+    const { height } = this.state
+
+    this._positionFromTop = getPositionFromTop(ReactDOM.findDOMNode(this), this.scrollElement)
+
+    const newHeight = getHeight(this.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/WindowScroller.test.js

@@ -77,20 +77,22 @@ describe('WindowScroller', () => {
   it('should restore pointerEvents on body after IS_SCROLLING_TIMEOUT', async (done) => {
     render(getMarkup())
     document.body.style.pointerEvents = 'all'
+    expect(window.getComputedStyle(document.body).pointerEvents).toEqual('all')
     simulateWindowScroll({ scrollY: 5000 })
-    expect(document.body.style.pointerEvents).toEqual('none')
+    expect(window.getComputedStyle(document.body).pointerEvents).toEqual('none')
     await new Promise(resolve => setTimeout(resolve, IS_SCROLLING_TIMEOUT))
-    expect(document.body.style.pointerEvents).toEqual('all')
+    expect(window.getComputedStyle(document.body).pointerEvents).toEqual('all')
     done()
   })
 
   it('should restore pointerEvents on body after unmount', () => {
     render(getMarkup())
     document.body.style.pointerEvents = 'all'
+    expect(window.getComputedStyle(document.body).pointerEvents).toEqual('all')
     simulateWindowScroll({ scrollY: 5000 })
-    expect(document.body.style.pointerEvents).toEqual('none')
+    expect(window.getComputedStyle(document.body).pointerEvents).toEqual('none')
     render.unmount()
-    expect(document.body.style.pointerEvents).toEqual('all')
+    expect(window.getComputedStyle(document.body).pointerEvents).toEqual('all')
   })
 
   describe('onScroll', () => {

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

@@ -1,5 +1,5 @@
+import styles from '../WindowScroller.css'
 let mountedInstances = []
-let originalBodyPointerEvents = null
 let disablePointerEventsTimeoutId = null
 
 /**
@@ -8,57 +8,52 @@ let disablePointerEventsTimeoutId = null
  */
 export const IS_SCROLLING_TIMEOUT = 150
 
-function enablePointerEventsIfDisabled () {
+function enablePointerEventsIfDisabled (element) {
   if (disablePointerEventsTimeoutId) {
     disablePointerEventsTimeoutId = null
-
-    document.body.style.pointerEvents = originalBodyPointerEvents
-
-    originalBodyPointerEvents = null
+    element.classList.remove(styles.disabled)
   }
 }
 
-function enablePointerEventsAfterDelayCallback () {
-  enablePointerEventsIfDisabled()
+function enablePointerEventsAfterDelayCallback (element) {
+  enablePointerEventsIfDisabled(element)
   mountedInstances.forEach(component => component._enablePointerEventsAfterDelayCallback())
 }
 
-function enablePointerEventsAfterDelay () {
+function enablePointerEventsAfterDelay (element) {
   if (disablePointerEventsTimeoutId) {
     clearTimeout(disablePointerEventsTimeoutId)
   }
 
   disablePointerEventsTimeoutId = setTimeout(
-      enablePointerEventsAfterDelayCallback,
-      IS_SCROLLING_TIMEOUT
-    )
+    enablePointerEventsAfterDelayCallback,
+    IS_SCROLLING_TIMEOUT,
+    element
+  )
 }
 
 function onScrollWindow (event) {
-  if (originalBodyPointerEvents == null) {
-    originalBodyPointerEvents = document.body.style.pointerEvents
+  const disabledElement = event.currentTarget === window ? document.documentElement : event.currentTarget
+  disabledElement.classList.add(styles.disabled)
 
-    document.body.style.pointerEvents = 'none'
-
-    enablePointerEventsAfterDelay()
-  }
+  enablePointerEventsAfterDelay(disabledElement)
   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()
+      enablePointerEventsIfDisabled(element === window ? document.documentElement : element)
     }
   }
 }

source/demo/Application.css

@@ -105,6 +105,11 @@ a {
   flex-wrap: wrap;
   justify-content: center;
 }
+.ScrollingBody {
+  composes: Body;
+  overflow: auto;
+  flex: 0 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;