我正在尝试在 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 中的增量是从大约-20 到 20 像素的正数或负数。
我遇到的问题是，我怎样才能让它用手指滚动？感觉不对。此外，它仅在不随手指移动时才滚动。touchmove 只触发一次，我在触摸手机时移动手指时不应该触发吗？
有人对这种类型的触摸滚动行为有经验吗？
我正在寻找类似的问题，但没有找到解决方案。你知道为什么touchmove可以触发一次吗？我唯一能想到的是用作剪贴板的textarea（在移动设备上它也用于启用虚拟键盘），但我已将背景设置为红色并且它不会在Android上移动。我正在测试此绘图演示中的其他代码：
https://zipso.net/a-simple-touchscreen-sketchpad-using-javascript-and-html5/
它工作正常，当你移动手指时，触摸移动会持续触发。
有任何想法吗？这将很难复制，但如果有人对调查感兴趣，我可以将我所有的代码放在 jQuery Terminal repo 的 github 上（在某个分支中）。
奇怪的是 touchend 在 touchmove 之后不会触发，只有当我点击终端启用键盘时才会触发一次。
我尝试在每次触发时对 jQuery 进行猴子修补并记录，但我没有任何其他事件（可能会阻止默认行为）也根据 docs mouse events fire after touchend 而那些不触发。
