今天做移动端项目时遇到的一个问题,带来了不少麻烦。
pc端的常用方法是 :
$('body').css({
overflow: 'hidden',
height: $(window).height() + 'px'
})
// 因为body的高度等于了window的高度,所以滚动自然就无法进行了,如果需要滚动了,只需要把高度从style标签上面移除就了
但在移动端是不生效的,这个也是大家说的滚动穿透问题:百度了很多大神的Demo终于会走到解决方法:下面是个人项目部分代码
———–css————
.modal-open{
position: fixed;
width: 100%;
}
————-js———–
//产品弹出详情页
$('.pro').each(function () {
// console.log(this);
$(this).on('click', function () {
$('#maskbody').fadeIn();
scrollTop = document.scrollingElement.scrollTop;
$('body').addClass('modal-open');
document.body.style.top = -scrollTop + 'px';
});
});
$('#colse').on('click',function () {
$('#maskbody').fadeOut();
$('body').removeClass('modal-open');
document.scrollingElement.scrollTop = scrollTop;
})
更多可以参考一下链接: