移动端js和css如何禁用底层的滚动事件，保证弹出层的滚动事件正常运行
展开阅读全文

今天做移动端项目时遇到的一个问题，带来了不少麻烦。

pc端的常用方法是 ：

$('body').css({
    overflow: 'hidden',
    height: $(window).height() + 'px'
});// 因为body的高度等于了window的高度,所以滚动自然就无法进行了,如果需要滚动了,只需要把高度从style标签上面移除就好了

但在移动端是不生效的，这个也是大家说的滚动穿透问题：

百度了很多大神的Demo终于会走到解决方法：下面是个人项目部分代码

CSS代码

<style>
.modal-open{
    position: fixed;
    width: 100%;
}
</style>

js代码

<script>
 //产品弹出详情页
$(this).on('click', function () {
   scrollTop = document.scrollingElement.scrollTop;
   $('body').addClass('modal-open');
   document.body.style.top = -scrollTop + 'px';
});
 //关闭详情页
$('#colse').on('click',function () {
  $('body').removeClass('modal-open');
  document.scrollingElement.scrollTop = scrollTop;
});
</script>