Aphorism
All I ever wanted was a single thing worth fighting for.
阻止移动端 弹层 touchmove 底层的 html overflow 的元素也跟随移动
两种方案:
- 直接阻止 元素touchmove 默认行为
- 在弹层出现的时候, html overflow:hidden;(这个是在弹层元素需要 overflow:auto时候使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止浏览器的原生scroll 效果</title>
</head>
<body>
<script>
// DOM 和 return false
// 可以总结如下: 无论是在 js 或者 jquery 的封装中, return false 等价于 e.stopPropagation() 和 e.preventDefault() ,阻止浏览器的默认行为和 事件冒泡
// 浏览器的默认行为中: scroll 效果, a 标签跳转, 点击键盘后 文字显示到屏幕上
// 以后dom事件中 return false 时候注意 ,是否需要同时 组织冒泡 和 浏览器的默认行为
// M1: 一般遮罩层不需要scroll效果的时候可以使用
$('body').append(html); // 动态生成遮罩
$('bg_mask').on('touchmove',function(e){
// 阻止浏览器的默认行为
e.preventDefault();
// 或者使用 return false。
});
// M2:如果 alert-layer 中需要使用 scroll 效果 可以使用如下方法
//
// 弹层出现的时候
$('html').height('100%').css('overflow-y','hidden');
// 弹层消失的时候
$('html').height('auto').css('overflow-y','auto');
// 这里有可能产生 页面滚动顶部
// 解决方法就是: 记录下当前的 $(window).scrollTop(),然后恢复,注意的是此时背景需要黑色
</script>
</body>
</html>