上一篇的后续。。。规避ios全局overscroll的坑

所以就说自己太naive

今天闲地蛋疼着看了下csdn的手机端和一些网站如携程的，发现不少站点都已经在顶部栏用了fixed，但是不会出现overscroll(俗称橡皮筋效果或出界)的情况。

上图就出现了恶心的情况，页面下拉的时候，原本fixed上去的topbar被背景色覆盖了。

但是人家csdn和携程是这样的：

solution:

一时好奇研究下，发现原来他们将页面高度限制在客户端可视区高度，比如我用的是iphone6，document.documentElement.clientHeight就是667,但是在safari浏览器上打开页面，可视区高度是553px。

将页面限制在客户端可视区高宽后，全局使用-webkit-overflow-scrolling: touch;完全可以模拟原本的流式布局。(划重点)

iOS safari 如何阻止“橡皮筋效果”？

一般针对橡皮筋效果的负面影响，要么限制全局的touchmove浏览器默认行为，要么在toustart或touchmove的时候监听scroll位置，在内容滚到顶/底的时候控制scrollTop让它处于临界值。

我试了下知乎上这个答案的方式，发现还是偶尔会overscroll，然后找到一个小插件：

localscrollfix

插件的源码很简单，只做了两件事，一是给内滚动容器添加样式，二是监听其touchStart和scroll事件，在touchStart的时候判断滚动内容是否超过临界值并调控，而scroll监听器只是进行函数节流。

执行localscrollfix(selector)返回一个带destroy方法的对象，帮我们在卸载组件时移除监听事件。

不得不说，真好用。。。

-------------------------------------------------------------------

不过，对于顶部其实有最简单的方式，直接用一个div.warpper把topbar包住，div.warpper设定高度(用作占位),topbar用fixed定位在顶部就好了。