触控板上的双指滚动js
我们开发了一个网站,它具有水平方向,并且想要用两个手指左右移动来实现触摸板控制。触控板上的双指滚动js
当你在触摸板上左右移动两个手指时,站点页面会左右滚动。现在我们已经实现了用两个手指向上/向下移动和页面向左/向右滚动的触摸板控制。
我们怎样才能改变触摸板控制使用两个手指从上/下移动到左/右滚动站点页面左/右使用js或jQuery?
你需要做的是改变可以滚动的东西。如果你的页面足够大,左/右滚动有意义,浏览器将允许它以这种方式滚动。
基本上,如果你只希望他们在某个方向滚动,只能在该方向上制作内容。如果有必要,您可以通过将需要的特定大小的容器div与overflow设置为none来实现此目的。
通常当你想接手剧本触摸事件,您可以添加这样的事情,以避免通常的滚动和缩放:
$("body").bind("touchstart", function(e) {
e.preventDefault();
})
明白了。但是我怎样才能检测/听两个手指在WebKit引擎(例如,Safari)上构建的浏览器的MacOs机器上的触摸板上的事件?我想捕获这些事件,以防止在这个浏览器中的defoult滚动操作。 – 2012-08-20 13:09:15
我可能有点晚,但有同样的问题,我迷迷糊糊前在这个问题上。 稍微进一步的调查让我认为捕捉触控板滚动的最佳选择是wheel
事件。
function doScroll(e) {
// positive deltas are top and left
// down and right are negative
// horizontal offset e.deltaX
// vertical offset e.deltaY
console.log(`x:${e.deltaX} y:${e.deltaY}`);
e.preventDefault(); // disable the actual scrolling
}
window.addEventListener("wheel", doScroll, false);
我已经准备a fiddle告诉你的滚动方向和偏移值,但防止滚动本身。
wheel event具有delta属性(至少在Chrome中)对动量很敏感,并且会给出当前的相对滚动偏移量,而不是在scroll
事件中提供的绝对滚动位置。
是不是滚动由操作系统(或浏览器)处理而不是网站? – 2012-04-02 14:01:39