javascript - 限制 Kendo Grid 在触摸屏上一次向一个方向滚动

Question

当用户使用触摸屏设备时，我想限制对 Angular 线滚动 - 所以我的想法是强制一次向一个方向滚动 - 水平或垂直。

我已经设置了一个 JS Fiddle 来检测是否启用了触摸滚动，并且我能够输出 x 和 y 坐标。但我没有看到偏移量或任何东西，我认为我需要它来计算预期方向。

我知道 apple 使用 directionalLockEnabled 来限制，所以我想知道 Kendo 中是否有类似的功能。如果没有，也许有一种方法可以弄清楚用户打算向哪个方向滚动并“卡住”另一个坐标。

我创建的 JS fiddle (dataBound 方法中的相关部分):

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

(相关代码仅适用于触摸...但如果您在开发工具中启用移动仿真则应该可以使用)

另一个问题是触发滚动事件的次数。工作时，也许我可以设置一个去抖动来处理触发的频率。

Answer 1

如果您想使用 javascript 进行此修复，您可以计算 X 和 Y 移动的范围。 对于触摸设备，在touchstart时设置起始位置X和Y，并在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;
    });

对于wheel设备，比较delta

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