我已经尝试了很多天来解决以下问题。
我在页面顶部有一个菜单,需要使用 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;}
这仍然会导致页面过度滚动。 document.ontouchstart
上的 preventDefault()
可以解决这个问题,但会破坏滚动。您也许可以通过检查scrollOffset来执行选择性的preventDefault()
。但我想从长远来看,我会推荐类似 iScroll 的东西。 .
也可以调整碰撞箱,使阻力更大一些。我在上一个例子中就是这么做的。我在文档上附加了 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/