Manual Scrolling - Scroll Start Event?

[shaekuronen]

Awesome plugin, thanks!

I'm implementing jquery.lazyload with smoothDivScroll, which is working great on desktop. Basically, listen for mouseenter event and then fire lazyload. It's a little rough, as all the images load when lazyload executes, but it's better than downloading all the images at page load.

However, doesn't work w/ touch. So added on touchstart, but not reliable cross-device.

So, might be best option to use pointerevents-polyfill, but that's a lot of js to download just to lazyload these images (bc not using anywhere else)

Is manual scroll start event possible? Then I can just hook into that, load the images, and life is wonderful.

[shaekuronen]

scrolledToElementNumber looks promising, but I'm not getting any of these scrolledTo callbacks to work. so, for instance, only the scrollerRightLimitReached is working. Any ideas?

        $('.tw-slider').smoothDivScroll({
          autoScrollingMode: "",
          autoScrollingDirection: "endlessLoopRight",
          touchScrolling: true,
          scrolledToElementNumber: function(eventObj, data) {
            console.log("SCROLLED TO ELEMENT ID " + data["elementId"]);
          },
          scrollerRightLimitReached: function(eventObj, data) {
            alert("Autoscroll right limit reached.");
          },
          scrolledToFirstElement: function(eventObj, data) {
            alert("scrolled to first element");
          },
          scrolledToStartElement: function(eventObj, data) {
            alert("scrolled to start element");
          },
          scrolledToLastElement: function(eventObj, data) {
            alert("scrolled to last element");
          },
          scrolledToFirstElement: function(eventObj, data) {
            alert("scrolled to first element");
          }
        });

[shaekuronen]

Ok, found a solution. In smoothDivScroll, if touchScrolling is enabled, there's a touchMoved event that fires whenever the scroller moves (should really be a scrollerMoved event, as it fires on desktop when mouse initiated animation, but anyways)

/*****************************************
SET UP EVENTS FOR TOUCH SCROLLING
*****************************************/
if (o.touchScrolling && el.data("enabled")) {
  // Use jquery.kinetic.js for touch scrolling
  // Vertical scrolling disabled
  el.data("scrollWrapper").kinetic({
    y: false,
    moved: function (settings) {
      if (o.manualContinuousScrolling) {
        if (el.data("scrollWrapper").scrollLeft() <= 0) {
          self._checkContinuousSwapLeft();
        } else {
          self._checkContinuousSwapRight();
        }
      }

      // Callback
      self._trigger("touchMoved");
    },
    stopped: function (settings) {
      // Stop any ongoing animations
      el.data("scrollWrapper").stop(true, false);

      // Stop any ongoing auto scrolling
      self.stopAutoScrolling();

      // Callback
      self._trigger("touchStopped");
    }
  });
}

then in smoothDivScroll init, listen for touchMoved event and lazyload images

$('.tw-slider').smoothDivScroll({
  autoScrollingMode: "",
  autoScrollingDirection: "endlessLoopRight",
  touchScrolling: true,
  touchMoved: function(eventObj, data) {
    console.log("touchMoved event happened");
    GLOBAL.lazyloadImages();
  }
});