完美兼容实现移动端弹窗屏蔽页面滚动效果实现

弹窗弹出时页面不能滚动

在做移动端业务的时候，经常会有弹出弹窗组件的需求，如dialog、toast，有一个用户体验是弹窗弹出后，用户手指滑动页面的时候，原始页面应该是不能再滚动的，而弹窗内的滚动又是可以滚动的,那么如何在来屏蔽页面滚动，释放弹窗内的滚动呢，首先想到的是给html、body标签添加class使其overflow:hidden;这样做的问题是：手机端用户滚动到屏幕一定位置后再去触发弹窗，这时候设置overflow:hidden的属性，页面会滚到页面顶部，这样肯定是不行的，这里用js去禁用touchmove事件的默认行为，而弹窗内的滚动又做一下差异处理，代码如下(zeptojs实现)：

/*
 params:{
  $dialog:弹窗类名,
  $inner-dialog:弹窗内需要滚动的类
 }
 eg:fixedDialog('#wx_follow','.js-dialog-body')
*/
var fixedDialog = function($dialog,$inner-dialog) {
     /*弹窗滚动与下拉刷新的兼容解决办法*/
      var y;
      var top;
      var $scroll = $dialog.find($inner-dialog);

      $dialog.on('touchmove', function (e) {
          e.preventDefault();
      });
      //弹窗内需要滚动的地方
      $scroll.length && $scroll.on('touchmove', function (e) {
          var dy = (y - e.touches[0].clientY)*1.2;
          $scroll.scrollTop(top + dy);
      }).on('touchstart', function (e) {
          y = e.touches[0].clientY;
          top = $scroll.scrollTop();
      });

}

很小的一个产品体验细节，但是好的产品都是慢慢通过细节来打磨的～