阻止移动端弹层 touchmove 底层的 html overflow 的元素也跟随移动

来源：互联网发布：地毯胶如何清除知乎编辑：程序博客网时间：2024/05/29 19:01

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>

阅读全文

0 0

阻止移动端 弹层 touchmove 底层的 html overflow 的元素也跟随移动

Aphorism

阻止移动端 弹层 touchmove 底层的 html overflow 的元素也跟随移动

阻止移动端弹层 touchmove 底层的 html overflow 的元素也跟随移动

阻止移动端弹层 touchmove 底层的 html overflow 的元素也跟随移动