11

When a user is on a touch screen device, I'd like to restrict diagonal scrolling - so the idea is to force scrolling one direction at a time - horizontal or vertical.

I've set up a JS Fiddle that detects if touch scrolling is enabled and I'm able to output the x and y coordinates. But I don't see an offset or anything and figure I need that to calculate the intended direction.

I know that apple uses a directionalLockEnabled that will restrict, so I'm wondering if something like this is available in Kendo. If not, maybe there's a way I can figure out which direction the user is intending to scroll in and 'freeze' the other coordinate.

A JS fiddle I created (relevant part in the dataBound method):

http://jsfiddle.net/dmathisen/tskebcqp/

(the relevant code only works on touch... but should work if you enable mobile emulation in dev tools)

Another issue is the amount of times the scroll event is triggered. When working, maybe I can set up a debounce to handle how often it's triggered.

dmathisen
  • 2,269
  • 3
  • 36
  • 63

1 Answers1

3

If you want to use javascript for this fix, you can calcul the ranges of the X and Y moves. For that with touch devices, set the start posi X and Y when touchstart and calcul the distances when touchmove

    var touchY = touchX = 0;
    $(document).delegate('.yourWrap', 'touchstart', function(e){
        touchX = e.originalEvent.touches[0].pageX;
        touchY = e.originalEvent.touches[0].pageY;
    });
    $(document).delegate('.yourWrap', 'touchmove', function(e){

        if (Math.abs(touchX - e.originalEvent.touches[0].pageX) 
            > Math.abs(touchY - e.originalEvent.touches[0].pageY)) {
            // Block overflow-y
        } else {
            // Block overflow-x
        }
        touchX = e.originalEvent.touches[0].pageX;
        touchY = e.originalEvent.touches[0].pageY;
    });

For wheel devices, compare delta

(e.wheelDeltaY/3 || -e.deltaY)
(e.wheelDeltaX/3 || -e.deltaX)
Dux
  • 309
  • 1
  • 5
  • This is awesome and I'll try it out. You should know that it's recommended to user 'on' and not 'delegate' as of jQuery 1.7. So `$(document).on('touchstart', '.yourWrap', function(e) { ... });` From http://api.jquery.com/delegate/ "As of jQuery 1.7, .delegate() has been superseded by the .on() method." – dmathisen Dec 07 '15 at 18:48
  • This code is a part of one of my scripts where the wrap are generated by the user. My mistake. – Dux Dec 07 '15 at 20:21