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

【问题标题】：Restricting Kendo Grid to scroll in one direction at a time on touch screen限制 Kendo Grid 在触摸屏上一次向一个方向滚动
【发布时间】：2016-03-04 14:16:10
【问题描述】：

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

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

我知道苹果使用directionalLockEnabled 会限制，所以我想知道剑道中是否有类似的东西。如果没有，也许有一种方法可以确定用户打算滚动的方向并“冻结”另一个坐标。

我创建的一个 JS 小提琴（dataBound 方法中的相关部分）：

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

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

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

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid kendo-mobile

【解决方案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;
    });

对于轮式设备，比较 delta

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

【讨论】：

这太棒了，我会试试看。你应该知道，从 jQuery 1.7 开始，它被推荐给用户 'on' 而不是 'delegate'。所以$(document).on('touchstart', '.yourWrap', function(e) { ... }); 来自api.jquery.com/delegate“从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。”
此代码是我的一个脚本的一部分，其中包装是由用户生成的。我的错。