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

最新推荐文章于 2022-08-01 15:58:18 发布

palmer_kyle

最新推荐文章于 2022-08-01 15:58:18 发布

阅读量1.6k

点赞数

分类专栏： html javascript 文章标签： html 移动web

本文链接：https://blog.csdn.net/palmer_kai/article/details/78498100

版权

javascript 同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

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>

palmer_kyle

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
阻止移动端弹层 touchmove 底层的 html overflow 的元素也跟随移动

AphorismAll I ever wanted was a single thing worth fighting for.阻止移动端弹层 touchmove 底层的 html overflow 的元素也跟随移动两种方案：直接阻止元素touchmove 默认行为在弹层出现的时候， html overflow:hidden;(这个是在弹层元素需要 overflow：auto时候使用)<!
复制链接

扫一扫