Changed default behaviour from intervalCheck to onScroll Listener.

.travis.yml

@@ -1,3 +1,14 @@
+sudo: required
+dist: trusty
 language: node_js
 node_js:
-  - 0.12
+ - 0.12
+
+before_install:
+ - export CHROME_BIN=/usr/bin/google-chrome
+ - export DISPLAY=:99.0
+ - sh -e /etc/init.d/xvfb start
+ - sudo apt-get update
+ - sudo apt-get install -y libappindicator1 fonts-liberation
+ - wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+ - sudo dpkg -i google-chrome*.deb

README.md

@@ -55,7 +55,10 @@ Props
 - `active`: (default `true`) boolean flag for enabling / disabling the sensor.  When `active !== true` the sensor will not fire the `onChange` callback.
 - `partialVisibility`: (default `false`) consider element visible if only part of it is visible. Also possible values are - 'top', 'right', 'bottom', 'left' - in case it's needed to detect when one of these become visible explicitly.
 - `minTopValue`: (default `false`) consider element visible if only part of it is visible and a minimum amount of pixels could be set, so if at least 100px are in viewport, we mark element as visible.
-- `delay`: (default `1000`) integer, number of milliseconds between checking the element's position in relation the the window viewport. Making this number too low will have a negative impact on performance.
+- `intervalCheck`: (default `false`) the default usage of Visibility Sensor is to trigger a check on user scrolling, by checking this as true, it gives you the possibility to check if the element is in view even if it wasn't because of a user scroll
+- `intervalDelay`: (default `1000`) integer, number of milliseconds between checking the element's position in relation the the window viewport. Making this number too low will have a negative impact on performance.
+- `disableScrollCheck`: (default: `false`) by making this true, the scroll listener is disabled and the intervalCheck is enabled with or without the `intervalCheck` props being set.
+- `delay`: (default: `250`) is the debounce rate at which the check is triggered. Ex: 250ms after the user stopped scrolling.
 - `containment`: (optional) element to use as a viewport when checking visibility. Default behaviour is to use the browser window as viewport.
 - `delayedCall`: (default `false`) if is set to true, wont execute on page load ( prevents react apps triggering elements as visible before styles are loaded )
 

karma.conf.js

@@ -49,9 +49,15 @@ module.exports = function(config) {
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
     browsers: [
-      process.env.TRAVIS === "true" ? 'PhantomJS' : 'Chrome'
+      process.env.TRAVIS === "true" ? 'Chrome_travis_ci' : 'Chrome'
     ],
 
+    customLaunchers: {
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits

tests/visibility-sensor-spec.jsx

@@ -38,7 +38,33 @@ describe('VisibilitySensor', function () {
     };
 
     var element = (
-      <VisibilitySensor delay={10} onChange={onChange} />
+      <VisibilitySensor delay={10} onChange={onChange} intervalCheck />
+    );
+
+    ReactDOM.render(element, node);
+  });
+
+  it('should notify of changes to visibility when user scrolls', function (done) {
+    var firstTime = true;
+    var onChange = function (isVisible) {
+      // by default we expect the sensor to be visible
+      if (firstTime) {
+        firstTime = false;
+        assert.equal(isVisible, true, 'Component starts out visible');
+
+        window.scrollTo(0,1000);
+      }
+      // after moving the sensor it should be not visible anymore
+      else {
+        assert.equal(isVisible, false, 'Component has moved out of the visible viewport');
+        done();
+      }
+    };
+
+    var element = (
+      <div style={{height: '5000px'}}>
+        <VisibilitySensor delay={10} onChange={onChange} />
+      </div>
     );
 
     ReactDOM.render(element, node);
@@ -66,9 +92,10 @@ describe('VisibilitySensor', function () {
       }
     };
 
+    // set interval must be one in order for this to work
     function getElement(style) {
       return (
-        <VisibilitySensor delay={10} onChange={onChange}>
+        <VisibilitySensor delay={10} onChange={onChange} intervalCheck>
           <div style={style} />
         </VisibilitySensor>
       );
@@ -102,7 +129,7 @@ describe('VisibilitySensor', function () {
     }, 20);
 
     var element = (
-      <VisibilitySensor active={false} delay={1} onChange={onChange} />
+      <VisibilitySensor active={false} intervalCheck intervalDelay={1} onChange={onChange} />
     );
 
     ReactDOM.render(element, node);

visibility-sensor.js

@@ -9,6 +9,19 @@ if (typeof window !== 'undefined') {
   containmentPropType = React.PropTypes.instanceOf(Element);
 }
 
+function debounce(func, wait) {
+  var timeout;
+  return function() {
+    var context = this, args = arguments;
+    var later = function() {
+      timeout = null;
+      func.apply(context, args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
 module.exports = React.createClass({
   displayName: 'VisibilitySensor',
 
@@ -21,6 +34,9 @@ module.exports = React.createClass({
     ]),
     delay: React.PropTypes.number,
     delayedCall: React.PropTypes.bool,
+    disableScrollCheck: React.PropTypes.bool,
+    intervalCheck: React.PropTypes.bool,
+    intervalDelay: React.PropTypes.number,
     containment: containmentPropType,
     children: React.PropTypes.element,
     minTopValue: React.PropTypes.number
@@ -31,7 +47,10 @@ module.exports = React.createClass({
       active: true,
       partialVisibility: false,
       minTopValue: 0,
-      delay: 1000,
+      delay: 250,
+      disableScrollCheck: false,
+      intervalCheck: false,
+      intervalDelay: 1500,
       delayedCall: false,
       containment: null,
       children: React.createElement('span')
@@ -65,14 +84,23 @@ module.exports = React.createClass({
   },
 
   startWatching: function () {
-    if (this.interval) { return; }
-    this.interval = setInterval(this.check, this.props.delay);
+    if (this.debounceCheck || this.interval) { return; }
+
+    if (this.props.intervalCheck || this.props.disableScrollCheck) {
+      this.interval = setInterval(this.check, this.props.intervalDelay);
+    }
+    if (!this.props.disableScrollCheck) {
+      this.debounceCheck = debounce(this.check, this.props.delay);
+      window.addEventListener('scroll', this.debounceCheck);
+    }
+
     // if dont need delayed call, check on load ( before the first interval fires )
     !this.props.delayedCall && this.check();
   },
 
   stopWatching: function () {
-    this.interval = clearInterval(this.interval);
+    if (this.debounceCheck) { window.removeEventListener('scroll', this.debounceCheck); }
+    if (this.interval) { this.interval = clearInterval(this.interval); }
   },
 
   /**
@@ -108,15 +136,13 @@ module.exports = React.createClass({
       right: rect.right <= containmentRect.right
     };
 
-    var fullVisible = (
+    var isVisible = (
       visibilityRect.top &&
       visibilityRect.left &&
       visibilityRect.bottom &&
       visibilityRect.right
     );
 
-    var isVisible = fullVisible;
-
     // check for partial visibility
     if (this.props.partialVisibility) {
       var partialVisible =
@@ -135,7 +161,7 @@ module.exports = React.createClass({
         : partialVisible
     }
 
-    var state = this.state
+    var state = this.state;
     // notify the parent when the value changes
     if (this.state.isVisible !== isVisible) {
       state = {