CSS3中-webkit-overflow-scolling的示例分析

小编给大家分享一下CSS3中-webkit-overflow-scolling的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

创新互联于2013年成立，是专业互联网技术服务公司，拥有项目成都网站设计、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元桓仁做网站,已为上家服务,为桓仁各地企业和个人服务,联系电话:028-86922220

我们都知道在ios的safari浏览器和app内核浏览器中，当一个h6页面内容超出屏幕高度，我们手指去滑动屏幕的时候，只要手势一离开屏幕，滚动立刻结束。这时候我们可以通过设置-webkit-overflow-scrolling=touch来使页面可以顺畅滚动，但是设置这个也会引出许多问题。

1、单独对body设置-webkit-overflow-scrolling touch是无效的，需要针对html和body同时设置才有效果，代码如下：

html,body{
    height: 100%;
    overflow: auto;
   -webkit-overflow-scrolling: touch;
}

2、父容器设置-webkit-overflow-scrolling=touch后，子容器不允许出现fixed固定的子元素，为什么这么说呢。因为当你设定-webkit-overflow-scrolling=touch后，你滑动屏幕的时候会发现fixed属性失效了，他也跟着屏幕滚动了，只有当滚动停止的时候这个元素才会在固定到页面上。显然这不是我们要的结果。

这里我的解决方法是不把-webkit-overflow-scrolling设置在body元素上，在需要滚动的地方另外增加div容器去设定，然后把需要fixed的容器都直接放在body元素内。

3、单独对div设定-webkit-overflow-scrolling属性无效，经测试后发现，我需要先对父容器div1设定为有高度的容器，然后在对超出的子容器设定-webkit-overflow-scrolling属性具体代码如下：

我要滚动啊，，在ios要顺畅啊