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.

1 Answer 1

3
+50

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)
2
  • 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 api.jquery.com/delegate "As of jQuery 1.7, .delegate() has been superseded by the .on() method."
    – dmathisen
    Dec 7, 2015 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 7, 2015 at 20:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.