弹出 modal 后,在手机端,触摸滑动遮罩层,页面会出现滚动的问题。

两种解决方法:
  • 通过 js 禁止页面出发 movetouch 事件。
    // 禁止触发 touchmove 事件
    $('body').bind('touchmove', function() {
        return false;
    });

    // 接触禁止
    $('body').unbind('touchmove');
  • 通过 css 来处理
    // one
    position: fixed;
    top: 0; // or others, like bottom 

    // two
    overflow: hidden;

可查看以下几篇文章,进一步了解:

  1. Prevent body scrolling when the user scrolls on fixed position div

  2. 由弹出层引发对滚动原理的讨论

  3. Prevent BODY from scrolling when a modal is opened