UI在走查页面的时候好几次提到了这个问题,在h5页面最顶部或者底部拉页面的时候,还会出现一块页面之外的空白,松开手页面回弹回去,UI表示这样看起来页面像是截断了很不友好,能否拉了之后还是背景色而不是白色。
首先想到的就是外面包一层高度为需要视窗高度的fixed div,然后让里面的内容滚动。可惜的是在ios上滑动出现问题——当scroll bar消失后,页面滑不动了。
于是搜索一下怎么去掉ios的“橡皮筋”,于是看到了插件iNoBounce,其原理就是在支持-webkit-overflow-scrolling属性的元素上监听touchmove事件,用Js实现子元素的滚动,并且当到边界的时候,event.preventDefalut()来控制不要继续滑动。
所以依旧还是在整个页面外面包一层div,将div设置为视口高度,内部的div加上:
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
这样就解决了橡皮筋的问题。
不过要注意的是, -webkit-overflow-scrolling: touch;这个会让内部的一些z-index失效【仅ios上失效】,所以还得看看页面有没有哪里是有问题的。
记录一下坑: