CODEWITHSUNDEEP
javascripttwitter-bootstraptouchhorizontal-scrollingswipe-gesture
Anand Sunderraman
Anand Sunderraman

Reputation: 8148

Mobile / Touch Enabled Screens - horizontal scroll on swipe

This question has been asked after a detailed discussion on this SO question

Problem:

I need a horizontal scroll which can be scrolled using mouse drag on desktops and swipe events on touch enabled screens

Possible Solution:

I tried using the jQuery dragscrollable which works fine on desktops but not on touch enabled devices

So then I went on to explore Touch Swipe Jquery Plugin and came up with a possible solution at JSFiddle Code and the result for the JSFiddle can be found here

You can also find a working demo at here

My java script code is as follows

//to detect if device has touch enabled
var is_touch_device = 'ontouchstart' in document.documentElement;

        $(function() 
        {
                $('.myClass').dragscrollable();
                //if touch is enabled then we have to map the swipe event                         
                if(is_touch_device)
                    $('.panel_list').swipe( { swipeStatus:scroll_panel_list, allowPageScroll:'horizontal' } );
                function scroll_panel_list(event, phase, direction, distance)
                {
                    var pos = $('.myClass').scrollLeft();
                    if(direction == 'left')
                    {
                        $('.myClass').animate({scrollLeft: pos + 200} );
                    }
                    if(direction == 'right')
                    {
                        $('.myClass').animate({scrollLeft: pos - 200} );
                    }
                }    
            });​

I have tested it works fine on Android browser but not very reponsive on iPhone.

Can someone help me come up with a better solution ? I am using twitter bootstrap

EDIT:1

Well now I guess I might have hit upon a nice plugin in that seems to work fine on desktops and touch enabled devices, the plugin is called jquery.dragscroll, I have an updated demo here

EDIT:2

There seems to be another plugin that has support for touch-enabled devices, it is called Overscroll. I haven't evaluated it as yet

Upvotes: 4

Views: 21003

Answers (3)

Steve Seeger
Steve Seeger

Reputation: 1477

I found an older solution and modified it for horizontal scrolling. I've tested it on Android Chrome and iOS Safari and the listener touch events have been around a long time, so it has good support: http://caniuse.com/#feat=touch.

Usage:

touchHorizScroll('divIDtoScroll');

Functions:

function touchHorizScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollLeft+event.touches[0].pageX;              
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollLeft=scrollStartPos-event.touches[0].pageX;              
        },false);
    }
}
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

Original Vertical one-finger touch scroll:

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

Vertical now has a simplified CSS solution, doesn't work for horizontal DIV scroll on mobile though: 

-webkit-overflow-scrolling: touch

The question also asks for mouse-grab on desktop, which can be accomplished with Nice Scroll, and does work in tandem with my solution above if you need it:

https://github.com/inuyaksa/jquery.nicescroll

var nice = $("#mydiv").getNiceScroll({horizrailenabled: true, hwacceleration: true});

Upvotes: 2

rfourg
rfourg

Reputation: 1

This is possible with

http://labs.rampinteractive.co.uk/touchSwipe/demos/Page_scrolling.html

$('body').swipe({
        swipe: function(event, direction, distance, duration, fingerCount) {
            switch (direction) {
                case 'left':
                    // Code here
                    break;
                case 'right':
                   //Code here
                   break;
            }
        },
        allowPageScroll: "vertical"
    });

Upvotes: 0

Playforward
Playforward

Reputation: 560

Additionally, there is the "Swipeview" script http://cubiq.org/swipeview

Upvotes: 2

Related Questions