实现“少”时，例如在移动设备上滚动时，仅触摸一次移动火

Question

我正在尝试在 jQuery 终端的较少扩展中实现触摸滚动。它的工作方式类似于 less unix 命令。

我有这个代码：

self.touch_scroll(function(event) {
    // how much difference changed since last touch move
    var delta = event.current.clientY - event.previous.clientY;
    var ret;
    var interpreter = interpreters.top();
    if (is_function(interpreter.touchscroll)) {
        ret = interpreter.touchscroll(event, delta, self);
    } else if (is_function(settings.touchscroll)) {
        ret = settings.touchscroll(event, delta, self);
    }
    if (ret === true) {
        return;
    }
    return false;
});
// make_callback_plugin is helper that use $.Callbacks and make sure that there is only
// one handler on the element
$.fn.touch_scroll = make_callback_plugin({
    name: 'touch',
    init: function(handler) {
        var origin;
        var previous;
        $(this).on('touchstart.scroll', function(e) {
            e = e.originalEvent;
            if (e.touches.length === 1) {
                previous = origin = e.touches[0];
            }
        }).on('touchmove.scroll', function(e) {
            e = e.originalEvent;
            console.log(!!origin + ' && ' + (e.touches.length) + ' === 1');
            if (origin && e.touches.length === 1) {
                var current = e.touches[0];
                var ret = handler({
                    origin: origin,
                    previous: previous,
                    current: current
                });
                if (ret === false) {
                    // this don't change anything
                    e.preventDefault();
                }
                previous = current;
            }
        }).on('touchend.scroll', function() {
            if (origin || previous) {
                origin = previous = null;
            }
        });
    },
    destroy: function() {
        $(this).off('touchstart.scroll touchmove.scroll touchend.scroll');
    }
});

在里面更少我有：

    function scroll(delta, scroll_by) {
        if (delta > 0) {
            pos -= scroll_by;
            if (pos < 0) {
                pos = 0;
            }
        } else {
            pos += scroll_by;
            if (pos - 1 > lines.length - rows) {
                pos = lines.length - rows + 1;
            }
        }
        print();
        return true;
    }
    term.push($.noop, {
        onResize: refresh_view,
        touchscroll: function(event, delta) {
            console.log({delta});
            var offset = Math.abs(delta);
            // 14 is default height of single line in pixels
            scroll(delta, Math.ceil(offset / 14));
            return false;
        },
        mousewheel: function(event, delta) {
            return scroll(delta, scroll_by);
        }, 

我也有这个css：

.terminal-less {
    touch-action: none;
    overscroll-behavior-y: contain;
}

鼠标滚轮滚动效果很好，它以相同数量的 scroll_by 滚动，默认情况下为 3（似乎正确）。（pos 是行偏移，所以如果我使用 pos++ 它移动/滚动一行，touchscroll 中的 delta 是从大约 -20 到 20 像素的正或负。

我遇到的问题是，我怎样才能让它用手指滚动？感觉不对。此外，它仅在不随手指移动时滚动。touchmove 只触发一次，当我在触摸手机时移动手指时它不应该触发吗？

任何人都有这种类型的触摸滚动行为的经验？

我正在寻找类似的问题，但没有找到解决方案。你知道为什么 touchmove 可以触发一次吗？我唯一能想到的是用作剪贴板的 textarea（在移动设备上它也用于启用虚拟键盘），但我已将背景设置为红色并且它在 Android 上不会移动。我正在测试这个绘图演示中的其他代码：

https://zipso.net/a-simple-touchscreen-sketchpad-using-javascript-and-html5/

并且它工作正常，当您移动手指时，触摸移动会继续触发。

有任何想法吗？很难复制，但如果有人对调查感兴趣，我可以将我所有的代码放在 jQuery Terminal repo 中的 github 上（在某个分支中）。

奇怪的是，touchend 在 touchmove 之后不会触发，只有当我点击终端启用键盘时才会触发一次。

我试图在每次触发时修补 jQuery 并记录，但我没有任何其他事件（这可能会阻止默认行为）也根据文档鼠标事件在 touchend 之后触发而那些不触发。

Answer 1

您需要的很简单.terminal-wrapper { pointer-events: none; } （基于devel分支）。但是使用这个规则你不能选择文本，这就是为什么你只需要在移动设备上使用它。

我不确定这是否会阻止在移动设备上选择文本，但如果是这样，您可以尝试将其添加touchstart （或什至touchmove作为第一条指令）并在touchend.

另外，我不得不添加一些 JS 代码，因为没有它interpreter.touchScroll是undefined. 但这并不是问题的主要原因。

interpreters = new Stack($.extend({}, settings.extra, {
    name: settings.name,
    prompt: prompt,
    keypress: settings.keypress,
    keydown: settings.keydown,
    resize: settings.onResize,
    greetings: settings.greetings,
    mousewheel: settings.mousewheel,
    touchScroll: settings.touchScroll, // NEW LINE
    history: settings.history,
    keymap: new_keymap
}, interpreter));

self.touch_scroll(function(event) {
    var delta = event.current.clientY - event.previous.clientY;
    var ret;
    var interpreter = interpreters.top(); // NEW LINE
    if (is_function(interpreter.touchScroll)) {
        ret = interpreter.touchScroll(event, delta, self);
    } else if (is_function(settings.touchScroll)) {
        ret = settings.touchScroll(event, delta, self);
    }
    if (ret === true) {
        return;
    }
});

没有 pointer-events: none;

和 pointer-events: none;