弹窗时禁止页面滚动（支持 IOS，PC）

模态窗现在的项目已经使用非常普遍，而模态窗的一个需求就是，当弹窗时禁止页面的滚动行为。
pc 端的做法较为简单，直接给 html、body 加一个样式就可以

$('html,body').css({
	overflow: 'hidden',
})

此方法对大部分的安卓浏览器也同样适用，但是遇到 IOS 却没有效果，某些奇怪的安卓浏览器也没有效果，此时很大一部分的同学的做法是监听 touch 事件，阻止默认行为

function bodyStopScroll(e) {
	 e.stopPropagation()
	 e.preventDefault()
}
document.addEventListener('touchmove', bodyStopScroll, { passive: false })

这段代码可以解决 80% 的需求
但是如果弹窗里也是一个需要滚动的元素，此时就需要处理里面的元素可以滚动，而整个页面不可以滚动，很麻烦，这里贴出一个解决方法

var position = 0 // 声明一个变量记录滚动条位置
var mobileType = 'h5' // 这里判断是 h5 还是 pc
function show() {
	if(mobileType === "h5") {
      $('html,body').css({
        overflow: 'hidden',
        position: 'fixed',
        top: '-' + position + 'px' // 防止滚动到顶部
      })
    } else {
      $('html,body').css({
        overflow: 'hidden',
      })
    }
}

function hide() {
	if(mobileType === "h5"){
      $('html,body').css({
        overflow: 'auto',
        position: 'static',
        top: 'initial'
      })
    }else{
      $('html,body').css({
        overflow: 'auto',
      })
    }
    $(window).scrollTop(position) // 恢复滚动条位置
}

这种方法兼容 IOS、安卓、PC