使 div 高度为向下滑动的距离

Posted 2023-02-24

【中文标题】使 div 高度为向下滑动的距离

【英文标题】：Make div height the distance of swipe down

【发布时间】：2013-11-02 20:34:21

【问题描述】：

我正在尝试在 body 上发生向下滑动事件时逐渐显示 div。

我目前正在使用 jQuery 版本的hammer.js 来监听向下滑动，但是当滑动发生在该值时，我如何获取滑动距离并更改 div 的高度?

这并不多，但这是我目前所拥有的：

var distance;
$('body').on('swipedown', function()

    // set distance to swipe distance
    $('header, #header, [role="banner"]').css('height', distance);
);

但是，上面不是只设置向下滑动结束时的距离吗？向下滑动时如何设置距离？

我将不胜感激任何和所有的帮助！

【参考方案1】：

通过hammer.js swipedown事件触发，你的函数会在事件对象中获取一个手势对象。

你可以这样得到

Hammer(document.body).on('swipedown', function(e)
    gesture = e.gesture

    // gesture.distance or gesture.deltaY is swipe distance
    // and you can console.log(gesture) to find more!
);

【讨论】：

啊，我明白了。谢谢你。等等，我在试试。为什么当我向下滑动时这不起作用：jsfiddle.net/ExeXq/1

如果使用鼠标，锤子事件很难触发。我不确定，但它可能是框架错误？您应该为 body 和 html 标签添加样式 height: 100% 以获得最大检测区域。

我增加了身体的触摸区域，我正在使用 Hammer 就像示例一样。我正在移动设备上进行测试。这里：jsfiddle.net/ExeXq/3