fix(Visibility): handle context scroll instead of just window scroll

src/behaviors/Visibility/Visibility.js

@@ -209,7 +209,7 @@ export default class Visibility extends Component {
     if (!isBrowser()) return
     const { context, fireOnMount, updateOn } = this.props
 
-    this.pageYOffset = window.pageYOffset
+    this.pageYOffset = this.getPageYOffset()
     this.attachHandlers(context, updateOn)
 
     if (fireOnMount) this.update()
@@ -310,7 +310,7 @@ export default class Visibility extends Component {
 
     this.oldCalculations = this.calculations
     this.calculations = this.computeCalculations()
-    this.pageYOffset = window.pageYOffset
+    this.pageYOffset = this.getPageYOffset()
 
     const {
       onBottomPassed,
@@ -364,7 +364,8 @@ export default class Visibility extends Component {
     const { bottom, height, top, width } = this.ref.current.getBoundingClientRect()
     const [topOffset, bottomOffset] = normalizeOffset(offset)
 
-    const direction = window.pageYOffset > this.pageYOffset ? 'down' : 'up'
+    const newOffset = this.getPageYOffset()
+    const direction = newOffset > this.pageYOffset ? 'down' : 'up'
     const topPassed = top < topOffset
     const bottomPassed = bottom < bottomOffset
 
@@ -397,6 +398,17 @@ export default class Visibility extends Component {
     }
   }
 
+  getPageYOffset() {
+    const { context } = this.props
+
+    if (context) {
+      // Heads up! `window` doesn't have `pageYOffset` property
+      return context === window ? window.pageYOffset : context.scrollTop
+    }
+
+    return 0
+  }
+
   // ----------------------------------------
   // Render
   // ----------------------------------------

test/setup.js

@@ -50,7 +50,7 @@ let info
 let warn
 let error
 
-const throwOnConsole = method => (...args) => {
+const throwOnConsole = (method) => (...args) => {
   throw new Error(
     `console.${method} should never be called but was called with:\n${args.join(' ')}`,
   )

test/specs/behaviors/Visibility/Visibility-test.js

@@ -276,6 +276,20 @@ describe('Visibility', () => {
           calculations: { direction: 'up' },
         })
       })
+
+      it('gets direction from `context` element', () => {
+        const context = document.createElement('div')
+        const onUpdate = sandbox.spy()
+
+        sandbox.stub(context, 'scrollTop').value(0)
+        mount(<Visibility context={context} onUpdate={onUpdate} />)
+
+        sandbox.stub(context, 'scrollTop').value(5)
+        domEvent.scroll(context)
+        onUpdate.should.have.been.calledWithMatch(null, {
+          calculations: { direction: 'down' },
+        })
+      })
     })
   })
 
@@ -367,8 +381,8 @@ describe('Visibility', () => {
         const opts = { [callbackName]: callback }
 
         const offset = 10
-        const falsyCond = _.map(_.first(falsy), value => value + offset)
-        const truthyCond = _.map(_.first(truthy), value => value + offset)
+        const falsyCond = _.map(_.first(falsy), (value) => value + offset)
+        const truthyCond = _.map(_.first(truthy), (value) => value + offset)
 
         wrapperMount(<Visibility {...opts} offset={offset} />)
         mockScroll(...truthyCond)
@@ -546,7 +560,7 @@ describe('Visibility', () => {
   describe('updateOn', () => {
     beforeEach(() => {
       requestAnimationFrame.restore()
-      sandbox.stub(window, 'requestAnimationFrame').callsFake(fn => setTimeout(() => fn(), 0))
+      sandbox.stub(window, 'requestAnimationFrame').callsFake((fn) => setTimeout(() => fn(), 0))
     })
 
     it('defaults to "events"', () => {