zoukankan      html  css  js  c++  java
  • 如何解决移动端滚动穿透问题

    什么是滚动穿透

    在弹框上滑动时,会发现弹框下面的内容跟着在滚动,这个就是滚动穿透问题。

    在 PC 端,通过在 body 上添加  overflow:hidden;  可以解决这个问题,但是该方法在移动端是无效的,所以我们通常意义上的滚动穿透指的都是移动端。

    解决方案

    方案一:position: fixed;

    body.modal-open {
        position: fixed;
        height: 100%;  
    }

    通过为body添加 fixed 属性禁止body中其他元素滚动,但是会导致 body 中滚动位置丢失,所以还需要添加一些代码来记住以及还原滚动位置。

    弹框前:

    const scrollTop = document.body.scrollTop;

    弹框后:

    document.body.scrollTop = scrollTop;

    方案二:touchmove+preventDefault

    最好将所有弹框出现后禁止滚动的元素添加到一个 div 中(如果是为 body 元素添加 touchmove+preventDefault,会导致 modal 中内容过长时也不能滚动),然后为该元素添加 touchmove 事件监听,并阻止元素的默认行为。

    $('.modal-open .main').on('touchmove', function(e) {
        e.preventDefault();
    });    
  • 相关阅读:
    [转]nmake命令(windows下的makefile)
    [转]Visual Studio 2010 C++ 工程文件解读
    [转]开源库的编译
    强软弱虚引用试验
    ArtHas JVM在线排查工具
    JVM常用参数
    CMS两个常见问题
    jvisual vm连接
    jconsole连接
    JVM调优
  • 原文地址:https://www.cnblogs.com/philipding/p/10238012.html
Copyright © 2011-2022 走看看