pass scrollY event back to body?

[bryanbuchs]

I have a Scrollable that is taller than the viewport of the monitor/device. To be specific, the scrollable container width is 100% of the screen, but the height is equal to the contents of the scrollable (let's say "2000px"), and I have scrollingY disabled.

On desktop, when a user drags the browser window's vertical scrollbar, or spins the mouse wheel, the entire document is scrolled in the window.

On touch devices, dragging vertically does nothing.

Is there any way to allow vertical drags that happen inside the scrollable defer "naturally" to the document?

http://www.pbs.org/kenburns/explore/timeline

[bryanbuchs]

Well, I solved my own problem. I'm using my own implementation of EasyScroller; before passing the touches data off to doTouchMove in the touchemove event, I'm checking to see if the user has tried to move horizontally or vertically. Also required not prevent(ing)Default in the touchstart event.

    this.container.addEventListener("touchstart", function(e) {

      pageX = e.touches[0].pageX;
      pageY = e.touches[0].pageY;

      // Don't react if initial down happens on a form element OR A LINK
      if (e.touches[0] && e.touches[0].target && e.touches[0].target.tagName.match(/a|input|textarea|select/i)) {
        return;
      }

      that.scroller.doTouchStart(e.touches, e.timeStamp);
      // DON'T preventDefault -- allow page scroll on touch
      // e.preventDefault();

    }, false);

    this.container.addEventListener("touchmove", function(e) {

      // if we're dragging horizontally, pass to that.scroller (moved off center by more than 5px)
      // if not, just let the browser handle it

      if (e.touches[0].pageX > (pageX + 5) || e.touches[0].pageX < (pageX - 5)) {
        that.scroller.doTouchMove(e.touches, e.timeStamp, e.scale);
        e.preventDefault();
      } else {
        return;
      }

    }, false);