Mobile

[tsukasa1989]

Hello,

I needed some mobile scrolling and made the following code.

Functions to add:

onTouchStart : function(e){
        this.touch = {
            start : {
                y : e.touches[0].pageY
            }
        };
    },

    onTouchMove: function(e){
        // calculate new handle position
        this.handle.top += (e.touches[0].pageY - this.touch.start.y) * 0.01;

        this.setHandlePosition();
        this.setContentPosition();

        // prevent default scrolling of the entire document if handle is within [min, max]-range
        if(this.handle.top > this.props.handlePosition.min && this.handle.top < this.props.handlePosition.max){
            e.preventDefault();
        }
    },

Add the following code to the function appendEvents:

// Touch events
        var _this = this;
        this.container[0].addEventListener("touchstart", function(e){
            _this.onTouchStart(e);
        }, false);

        this.container[0].addEventListener("touchmove", function(e){
            e.preventDefault();
            _this.onTouchMove(e);
        }, false);

Good luck!

Tsukasa

[sincero]

hello there, I was wondering if this supports touch scrolling in iOS as well?

[tsukasa1989]

I have tested this on Android 3.2, 4.0, an iPhone 4S and a Samsung Galaxy Tab 10.1 with Android 3.2.

And it works on all. So it should support all touch devices. As long as they trigger the touchemove and touchstart events in Javascript.

[sincero]

sweet! one more question, where does the first piece of code go? The second piece of code i got, but i wasn't exactly sure where to paste the first part

[tsukasa1989]

You can put that before:

    //
    // mouse wheel movement
    //
    onMouseWheel: function(ev, delta){

[uekeueke]

could you show us the example working?
thanks!

[tsukasa1989]

I got a live example over here:
http://www.shirtbyhand.co.uk/configurator_html5/

Just click through it and when you get to Fabrics on the left hand side you will get a scrollbar.

Good luck!

[gr82d8]

tsukasa1989, you are a lifesaver. Your code has mobile support plus it supports scrolling on mouse focus! This should be included in the code already. Thanks again!

[thedustyrover]

Hi tsukasa,

I think there is actually a bug in the way the new position is calculated - this adjusts the position whenever the touchMove occurs, so that the touch position difference sets the velocity for the move, not the new position.

For a quick example, try the following:

1. Touch screen
2. Drag up vertically
3. Start moving finger left and right
4. Vertical scrolling will continue

You can also try scrolling down and back up, it always scrolls in one direction. I ended up implementing following which I think should be correct:

// Save the start position of handle
start : {
    y : e.touches[0].pageY,
    handleTop : this.handle.top
},

// Handle position based on displacement from touch start
var movement = e.touches[0].pageY - this.touch.start.y;
this.handle.top = this.touch.start.handleTop - movement*0.25;

[tsukasa1989]

Thanks alot! is it working?

[thedustyrover]

Yes, it's working on the implementation I have. I also encountered some bugginess with clicks being registered after the scroll in iOS. I ended up implementing some code to intercept the mouse events, detect the drag distance to determine whether it should be considered a scroll gesture or not, and then re-triggering mouse events if it was not. I think there is probably a better solution out there though.

[gr82d8]

Hi dailynathan. where should the bugfixes go should it be after this:
//
// set position of handle
//
setHandlePosition: function(){

        // stay within range [handlePosition.min, handlePosition.max]
        this.handle.top = (this.handle.top > this.props.handlePosition.max) ? this.props.handlePosition.max : this.handle.top;
        this.handle.top = (this.handle.top < this.props.handlePosition.min) ? this.props.handlePosition.min : this.handle.top;

        this.handle[0].style.top = this.handle.top + 'px';
    },

Thanks!