检测桌面Safari的双指滑动

Question

在OS X上的Safari中,使用魔术触控板或macbook触控板,分别向后或向左滑动两个手指效果.有没有办法检测到这一点,不同于点击后退/前进,或点击命令+箭头等？

原因是滑动有它自己的显示风格的滑动动画,并且在网站上使用自定义的ajax过渡,当你得到一个跟随另一个时,它看起来很奇怪.例如,当在github上浏览代码时会发生这种情况.

更新23/6/16:Github恢复了简单地交换页面内容而没有过渡,这是一个聪明的举动.我目前的做法是对后退/前进做同样的事情,即使在网站上使用某种奇特的过渡.这可以防止浏览器可能执行的任何操作与站点转换之间的冲突

Answer 1

您可以使用mousewheel事件查看在popstate事件之前是否已在触控板上执行水平滚动:

// boolean that stores if a swipe has been performed.
var bScrolled = false;
// countdown in ms before resetting the boolean.
var iTime = 1000;
var oTimeout;
window.addEventListener('mousewheel', function(e) {
  if (e.wheelDeltaY === 0) {
  // there is an horizontal scroll
    if (!bScrolled) {
    // no need to set bScrolled to true if it has been done within the iTime time. 
      bScrolled = true;
      oTimeout = setTimeout(function(){
        bScrolled = false;
      }, iTime);
    }
  }
});

window.onpopstate = function() {
  // clear the timeout to be sure we keep the correct value for bScrolled
  clearTimeout(oTimeout);
  // check if there has been a swipe prior to the change of history state
  if (bScrolled) {
    // check which browser & OS the user is using, then
    // trigger your awesome custom transition.
  }
}