Question

在使用简单的HTML＆amp; HTML时，你能推荐一个实际上提供边缘滑动功能的JS库吗？ CSS？

我已经搜遍了所有地方，并没有找到这个问题的真相来源。我已经看到很多图书馆可以启用滑动手势而不是边缘滑动。

我的最后一次尝试是使用 Hammer.js ，我尝试将其作为：

var swipe = new Hammer(document);
// detect swipe and call to a function
swipe.on('swiperight swipeleft', function (e) {
    e.preventDefault();
    var endPoint = e.pointers[0].pageX;
    var distance = e.distance;
    var origin = endPoint - distance;

    //swipe right to open nav
    if (origin <= 15 && e.type == 'swiperight') {
        // open main menu
        $('#navigation-menu').animate({
            left: '0'
        });
    } else {
        // close/hide menu(s)
        $('#navigation-menu').animate({
            left: '-100%'
        });
    }
});

此外，如果不使用任何库，如何使用vanilla JS实现移动边缘滑动以显示和隐藏内容（在我的情况下，它是导航菜单）？

此时我对解决方案/方向持开放态度。

Answer 1

这是一个解决方案，您可以设置thresholdStart，End，Milliseconds。您可能想要整理代码，并将其移植到触摸事件中（我更轻松地使用鼠标事件在我的浏览器中进行测试）。

使用： swipeEdgeFromLeft函数和swipeEdgeFromRight函数。

var div = document.body;
var mouse = {
  isDown: false,
  inLeft: false,
  inRight: false,
  downTimestamp: null
};
var width, thresholdStart, thresholdEnd, thresholdMilliseconds;

function resize(){
  width = window.innerWidth;
  thresholdStart = 0.1*width;//within 10% of screen width
  thresholdEnd = 0.13*width;//beyond 13% of screen width
  thresholdMilliseconds = 500;//must be done in 500 milliseconds
}
document.addEventListener("resize", resize, false);
resize();//initialize

div.addEventListener('mousedown'/*'touchstart'*/, function(e){
 var x = e./*touches[0].*/pageX;
 mouse.isDown = true;
 mouse.downTimestamp = performance.now();

 if(x < thresholdStart){
  mouse.inLeft = true;
 } else if(x > width-thresholdStart){
  mouse.inRight = true;
 }
});
div.addEventListener('mousemove'/*'touchmove'*/, function(e){
 
  var x = e./*touches[0].*/pageX;
  if(mouse.inLeft && x > thresholdEnd){
    mouse.inLeft = false;
    if(performance.now() - mouse.downTimestamp < thresholdMilliseconds){
      swipeEdgeFromLeft();
    }
  } else if(mouse.inRight && x < width-thresholdEnd){
    mouse.inRight = false;
    if(performance.now() - mouse.downTimestamp < thresholdMilliseconds){
      swipeEdgeFromRight();
    }
  }
});
div.addEventListener('mouseup'/*'touchend'*/, function(e){
 //var x = e./*changedTouches[0].*/pageX;
 mouse.isDown = false;
 mouse.inLeft = false;
 mouse.inRight = false;
 mouse.downTimestamp = null;
});
function swipeEdgeFromLeft(){
 console.log("edge swipe from left");
}
function swipeEdgeFromRight(){
 console.log("edge swipe from right");
}

body {
  max-width: 100vw;
  height: 100vh;
}
.bar {
  height: 100vh;
  background-color: rgba(0,0,0,0.4);
  position: fixed;
  pointer-events: none;
}
#left-inner-threshold {
  width: calc(0.1 * 100vw);
  left: 0;
}
#right-inner-threshold {
  width: calc(0.1 * 100vw);
  right: 0;
}
#left-outer-threshold {
  width: calc(0.13 * 100vw);
  left: 0;
}
#right-outer-threshold {
  width: calc(0.13 * 100vw);
  right: 0;
}

<div id="left-inner-threshold" class="bar"></div>
<div id="left-outer-threshold" class="bar"></div>
<div id="right-inner-threshold" class="bar"></div>
<div id="right-outer-threshold" class="bar"></div>

Answer 2

以下是使用Hammer.js v2.0.8

对现有代码的解决方案

@jovinbm可以找到有关如何实现边缘滑动的说明here。

$(document).ready(function () {

    const swipe = new Hammer(document);
    function getStartPosition(e) {
        const delta_x = e.deltaX;
        const delta_y = e.deltaY;
        const final_x = e.srcEvent.pageX || e.srcEvent.screenX || 0;
        const final_y = e.srcEvent.pageY || e.srcEvent.screenY || 0;

        return {
            x: final_x - delta_x,
            y: final_y - delta_y
        }
    };

    swipe.on('swiperight swipeleft', function (e) {
        e.preventDefault();
        const { x } = getStartPosition(e);
        console.log(x);
        //swipe right to open nav /* note the condition here */
        if (e.type == 'swiperight' && x >= 0 && x <= 50) {
            // open menu
            $('#navigation').animate({
                left: '0'
            });
            //swiping left should slide out nav and/or sub-nav
        } else {
            // close/hide menu
            $('#navigation, #task-menu').animate({
                left: '-100%'
            });
        }
    });
});

这是pen显示它的实际效果：

Answer 3

对于滑动，只有最终的pointerup事件作为srcEvent包含在传递给处理程序的事件对象中（请参阅http://hammerjs.github.io/api/）。在锤子事件对象中未提供包含滑动事件开始位置的初始位置的细节的初始pointerdown事件。幸运的是，您可以使用事件对象中的srcEvent来获取事件初始pointerdown事件的起始位置。

const getStartPosition = (e) => {
  const delta_x = e.deltaX;
  const delta_y = e.deltaY;
  const final_x = e.srcEvent.pageX || e.srcEvent.screenX || 0;
  const final_y = e.srcEvent.pageY || e.srcEvent.screenY || 0;

  return {
    x: final_x - delta_x,
    y: final_y - delta_y
  };
};

const handleSwipe = (e) => {
  const {x} = getStartPosition(e);

  if (x >= 0 && x <= 50) {
    // handle swipe from left edge e.t.c
  }
  else {
    // handle other case
  }
};

srcEvent只是一个普通的javascript事件，它继承了UIEvent的属性，因此继承了pageX/pageY api。这可能不适用于其他浏览器，因为其中一些浏览器是not standardized

边缘滑动导航

3 个答案: