Suggestion for useful methods

[luruke]

Hi there! There could be some useful methods that could be implemented in my opinion:

.lock() and .unlock() To temporary lock the scroll

.setPosition() Set a scroll position without having the tweening

What about adding a simple event-system/dispatcher? Could be useful to subscribe to events (scroll, resize...)

I was able to implement those thing easily, just extending the class. Not sure but to me they look quite handful / generic, what do you think?

[baptistebriel]

Hi @luruke,

Thanks a lot for those suggestions! 👍 Indeed, some of them are quite handful & generic.

I implemented a few weeks ago the .on() and .off() methods that basically add or remove on-scroll events, see these lines. Is that what you meant by .lock() and .unlock() ? Maybe it'd be a better name for these methods.

.setPosition() would definitely come in handy for #23.

I would love to see your extended class and how you implemented them. Feel free to post some code snippets. 😉

[luruke]

Hi @baptistebriel, Here is my actual code (sorry didn't had time to clean it up!)

I remember I tried with .on() and .off() to temporary disable the scroll, but wasn't working as expected.

const debounce = require('lodash/debounce');
const EventEmitter = require('eventemitter3');
const Smooth = require('smooth-scrolling');
const Barba = require('barba.js');

class Scroll extends Smooth.default {
  constructor(opt = {}) {
    super(opt);

    this.ee = new EventEmitter();
    this.isLock = false;
    this.bind();
  }

  bind() {
    Barba.Dispatcher.on('transitionCompleted', ()  => {
      this.resize();
    });

    window.addEventListener('resize', debounce(this.resize.bind(this), 100));
  }

  lock() {
    this.isLock = true;
    TweenLite.to(this.dom.scrollbar.el, 0.3, { xPercent: 100 });
  }

  unlock() {
    this.isLock = false;
    this.resize();
    TweenLite.to(this.dom.scrollbar.el, 0.3, { xPercent: 0 });
  }

  forcePosition(pos) {
    this.vars.current = pos;
    this.vars.target = pos;
  }

  calc(e) {
    if (this.isLock) {
      return;
    }

    super.calc(e);
  }

  run() {
    super.run();

    if (this.vars.current !== this.oldCurrentPrecise) {
      this.ee.emit('run', this.vars.current);
    }
    this.oldCurrentPrecise = this.vars.current;

    const c = Math.round(this.vars.current);
    if (c !== this.oldCurrent) {
      this.ee.emit('scroll', this.vars.current);
    }

    this.oldCurrent = c;
  }

  resize() {
    super.resize();

    this.calc({
      deltaX: 0,
      deltaY: 0
    });

    this.ee.emit('scroll');
  }
}

const myScroll = new Scroll({
  native: false,
  section: document.getElementById('barba-wrapper'),
  vs: {
    touchMultiplier: 3
  }
});

if (!Modernizr.phantomjs) {
  myScroll.init();
}

module.exports = myScroll;

[techhahn]

scrollToElement('@ id or class of the element'); method to scroll to the element by passing id or class.