Ограничение сетки Kendo для прокрутки в одном направлении за один раз на сенсорном экране
Когда пользователь находится на устройстве с сенсорным экраном, я хотел бы ограничить диагональную прокрутку - поэтому идея состоит в том, чтобы принудительно прокручивать по одному направлению по горизонтали или по вертикали.
Я установил скрипт JS, который определяет, включена ли сенсорная прокрутка, и я могу выводить координаты x и y. Но я не вижу смещения или чего-то еще, и мне нужно, чтобы вычислить предполагаемое направление.
Я знаю, что Apple использует directionalLockEnabled
, который будет ограничивать, поэтому мне интересно, доступно ли что-то подобное в Kendo. Если нет, возможно, есть способ выяснить, в каком направлении пользователь намерен прокручивать и "заморозить" другую координату.
Создана скрипт JS (соответствующая часть в методе dataBound
):
http://jsfiddle.net/dmathisen/tskebcqp/
(соответствующий код работает только при касании... но должен работать, если вы активируете мобильную эмуляцию в инструментах dev)
Другая проблема заключается в том, сколько раз срабатывает событие прокрутки. Когда я работаю, возможно, я могу настроить debounce для обработки того, как часто он срабатывает.
Ответы
Ответ 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)