javascript - 防止iPad首页拖动

标签 javascript jquery css ipad

我已经尝试了很多天来解决以下问题。

我在页面顶部有一个菜单,需要使用 swipedown 事件打开它(我使用的是 Hammer.js jQuery 版本)。

问题是,每次我尝试使用滑动进行交互时,我都会滚动页面(向上滑动)或向下拉页面,如 following question 中所述。 .

这是我迄今为止尝试过的:

overflow: hide; 在带有 overflow: auto 内部容器的 body 元素上,在顶部元素上滑动仍然会触发文档滚动。

在文档上设置 preventDefault 还会禁用 DOM 层次结构中的较低元素事件,因此我在页面中没有滑动事件。

还尝试在事件发生时在实际元素上使用 stopPropagation ,以防止事件链向上冒泡,结果导致对象无法响应事件(滑动)和文档滚动没有任何问题。

有什么想法如何才能保持页面滚动,而且在仅受影响的特定元素上使用常见手势(例如向下滑动/向上滑动)时?

这是一个example使用 JSFiddle,更好地演示该问题。

希望得到想法/想法

最佳答案

我不知道这是否有帮助,但我一直更喜欢使用拖动而不是滑动。在我的元素中使用 Hammer,滑动有点挑剔。从用户体验的 Angular 来看,拖动与滑动相比感觉是瞬时的。很像,鼠标按下与鼠标向上/单击。因此,在适当的情况下,并且我相信在显示滑动菜单的情况下,我会选择拖动

drag 而不是 swipe 替换您的示例,并使用 CSS 转换 -webkit-transition,而不是 jQuery 的 animate(drag会像鼠标移动一样触发,而不是单击或鼠标松开)似乎使它起作用。

Hammer('.nav').on('dragdown', function(e){
    e.gesture.preventDefault()
    $(".blue").html("down")
    $('.nav').css({"top":"0px"});
})
.on('dragup', function(e){
    e.gesture.preventDefault()
    $(".blue").html("dragup")
    $('.nav').css({"top":"-150px"});
});

//Added in CSS, for .nav
.nav {-webkit-transition:0.5s top;}

Example

这仍然会导致页面过度滚动。 document.ontouchstart 上的 preventDefault() 可以解决这个问题,但会破坏滚动。您也许可以通过检查scrollOffset来执行选择性的preventDefault()。但我想从长远来看,我会推荐类似 iScroll 的东西。 .

Example

也可以调整碰撞箱,使阻力更大一些。我在上一个例子中就是这么做的。我在文档上附加了 dragdown 事件而不是“菜单”,因此菜单不必明显更大。

Hammer(document).on("dragdown",function(e){
    //calculate ratio of first touch from top
    var pos=e.gesture.startEvent.center.pageY/window.innerHeight

    if(pos<0.2){  //drag occurs in the first 20% of the screen
        menu.style.marginTop="0px" //or animate here
        e.gesture.preventDefault()
        e.gesture.stopPropagation();
    }
})

关于javascript - 防止iPad首页拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23589943/

相关文章:

html - URL 片段弄乱了 CSS

Javascript:监听多个异步 Google Maps API v3 请求以完成

javascript - 通过框架通过ID查找后代元素

javascript - 在上下文 A 中准备上下文 B 的变量并在上下文 B 中解析它们

javascript - 查找页面中位置为 "absolute"的所有元素

javascript - jquery中如何通过自定义属性获取输入字段的值

javascript - 从用户离开页面时的位置重新启动计时器

php - Bootstrap 导航栏下拉菜单仅在一页上不起作用

javascript - 如何显示和隐藏元素,使用 JavaScript(不是 jQuery)将值从 JavaScript 传递到 html 元素?

html - 试图调整整个页面的大小(IE 缩小一切)