Подтвердить что ты не робот

Ограничение сетки Kendo для прокрутки в одном направлении за один раз на сенсорном экране

Когда пользователь находится на устройстве с сенсорным экраном, я хотел бы ограничить диагональную прокрутку - поэтому идея состоит в том, чтобы принудительно прокручивать по одному направлению по горизонтали или по вертикали.

Я установил скрипт JS, который определяет, включена ли сенсорная прокрутка, и я могу выводить координаты x и y. Но я не вижу смещения или чего-то еще, и мне нужно, чтобы вычислить предполагаемое направление.

Я знаю, что Apple использует directionalLockEnabled, который будет ограничивать, поэтому мне интересно, доступно ли что-то подобное в Kendo. Если нет, возможно, есть способ выяснить, в каком направлении пользователь намерен прокручивать и "заморозить" другую координату.

Создана скрипт JS (соответствующая часть в методе dataBound):

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

(соответствующий код работает только при касании... но должен работать, если вы активируете мобильную эмуляцию в инструментах dev)

Другая проблема заключается в том, сколько раз срабатывает событие прокрутки. Когда я работаю, возможно, я могу настроить debounce для обработки того, как часто он срабатывает.

4b9b3361

ОТВЕТЫ

Ответ 1

Если вы хотите использовать javascript для этого исправления, вы можете подсчитать диапазоны ходов X и Y. Для этого с сенсорными устройствами установите начальные позиции X и Y в момент нажатия и расчитайте расстояния при касании

    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;
    });

Для колесных устройств сравните дельта

(e.wheelDeltaY/3 || -e.deltaY)
(e.wheelDeltaX/3 || -e.deltaX)