屏蔽移动端浏览器滚动条效果

近期在做一个嵌入到app里的一个webapp页面，底部有一个菜单可以上下滑动显示隐藏，这种效果首先是考虑使用css的固定定位position:fixed,但是部分浏览器会有一个bug，就是说父层设置固定定位后位置发生变化后子元素不跟着父元素动，找了半天也没找到解决办法，后来发现使用positon：absolute绝对定位可以解决，但是问题又出现了，使用绝对定位在给盒子设置bottom：-200px为负值的时候页面会出现滚动条，给body设置高度和溢出隐藏都解决不掉，这不是逼我放大招么！

解决办法：屏蔽浏览器body的touchmove事件

document.body.addEventListener('touchmove', function (event) {
        event.preventDefault();
}, false);

结果大招也失败了，如果屏蔽了body的touchmove事件的话菜单的滚动也给屏蔽了，后面还是回到最初用样式解决

解决办法：
给菜单父元素设置postion：absolute，给.main设置position：relative，如果不设置定位点话设置overflow：hidden失效，然后用js动态给main设置一屏幕高度

评论加载中... 内容： 评论者： 验证码：