Skip to content

Instantly share code, notes, and snippets.

@christowiz

christowiz/scroller.js

Last active November 30, 2018 20:53
Show Gist options
  • Save christowiz/653b76d9e33868e9f0b37a3314762ff2 to your computer and use it in GitHub Desktop.
Save christowiz/653b76d9e33868e9f0b37a3314762ff2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. christowiz revised this gist Nov 30, 2018. 1 changed file with 4 additions and 6 deletions.
    10 changes: 4 additions & 6 deletions scroller.js
    View file
    Original file line number Diff line number Diff line change
    @@ -32,12 +32,10 @@
    // }

    function scroller(config) {
    if (!config.callback) throw Error('Scroller missing callback function');

    const element = config.element || window;
    const callback =
    config.callback ||
    function() {
    console.log('noop');
    };
    const callback = config.callback;
    let ticking = false;

    element.addEventListener('scroll', function(e) {
    @@ -59,4 +57,4 @@ function scroller(config) {
    };
    }

    module.exports = scroller;
    export default scroller;
  2. christowiz revised this gist Nov 29, 2018. 1 changed file with 11 additions and 6 deletions.
    17 changes: 11 additions & 6 deletions scroller.js
    View file
    Original file line number Diff line number Diff line change
    @@ -31,21 +31,26 @@
    // if ( topPosition <= -20 && !this.state.hideLabel ) this.hideLabel( true );
    // }

    function scroller({ element = window, cb }) {
    function scroller(config) {
    const element = config.element || window;
    const callback =
    config.callback ||
    function() {
    console.log('noop');
    };
    let ticking = false;
    const callback = cb;

    element.addEventListener('scroll', e => {
    element.addEventListener('scroll', function(e) {
    if (!ticking) {
    window.requestAnimationFrame(() => {
    window.requestAnimationFrame(function() {
    callback(e);
    ticking = false;
    });
    ticking = true;
    }
    });

    const remove = () => {
    const remove = function() {
    element.removeEventListener('scroll', callback);
    };

    @@ -54,4 +59,4 @@ function scroller({ element = window, cb }) {
    };
    }

    export default scroller;
    module.exports = scroller;
  3. christowiz revised this gist Nov 29, 2018. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions scroller.js
    View file
    Original file line number Diff line number Diff line change
    @@ -41,9 +41,8 @@ function scroller({ element = window, cb }) {
    callback(e);
    ticking = false;
    });
    ticking = true;
    }

    ticking = true;
    });

    const remove = () => {
    @@ -55,4 +54,4 @@ function scroller({ element = window, cb }) {
    };
    }

    export default scroller;
    export default scroller;
  4. christowiz created this gist Nov 29, 2018.
    58 changes: 58 additions & 0 deletions scroller.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    'use strict';

    // * Scroll optimization using window.requestAnimationFrame
    // *
    // * https://developer.mozilla.org/en-US/docs/Web/Events/scroll
    // *
    // * @module scroller
    // * @param {Object} element DOM element to attach listener to
    // * @param {Func} cb Callback method to return event object
    // * @returns {Func} Method to remove event listener from element
    //
    // Example:
    //
    // componentWillUnmount(){
    // this.scroller.remove();
    // }
    //
    // onEnter = () => {
    // this.entered = true;
    // this.content = document.querySelector( '.modal-content' );
    // this.scroller = scroller({
    // element: document.querySelector( '.aria-modal' ),
    // cb: this.handleScroll
    // });
    // }
    //
    // handleScroll = ( e ) => {
    // const topPosition = this.content.getBoundingClientRect().top;
    //
    // if ( topPosition > -20 && this.state.hideLabel ) this.hideLabel( false );
    // if ( topPosition <= -20 && !this.state.hideLabel ) this.hideLabel( true );
    // }

    function scroller({ element = window, cb }) {
    let ticking = false;
    const callback = cb;

    element.addEventListener('scroll', e => {
    if (!ticking) {
    window.requestAnimationFrame(() => {
    callback(e);
    ticking = false;
    });
    }

    ticking = true;
    });

    const remove = () => {
    element.removeEventListener('scroll', callback);
    };

    return {
    remove,
    };
    }

    export default scroller;