CSS3中-webkit-overflow-scolling的示例分析-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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要顺畅啊

经过反复测试发现如下设置也是能有效触发-webkit-overflow-scrolling属性的,具体代码如下:



哎呀我是要滚动的啊













有效果的哦。。。

当然,以上的版本就得在html渲染结束的时候去改变他的高度,以达到和屏幕高度一致,但是这种方式的维护性太差,后来又找到一种解决方案,具体代码如下:




我要完美解决ios的顺畅滑动问题啊,,,来试试咯。演示,请自己添加代码到超出屏幕内容哦~

这里,要提个醒,设置-webkit-overflow-scrolling属性的同时要么不要设定height,要么height+padding的高度不要超出屏幕的高度,不然你会发现等你滚动到顶部或者底部的时候会被截取掉一部分,需要你在滑动才能出现。。。这是个坑啊,本人一不小心设定高度百分百和padding后发现了这种现象,然后找来找去都找不到问题,只能删减代码慢慢排查。

4、当然,如果只是这些问题,那还真是好解决,可是,可是,某天写了个列表,需要做滚动分页特效,这时候我去兼听滚动条的滚动事件,发现scrollTop不会时时更新,要等到页面停止滚动后才能获取到scrollTop值。

5、页面滚动过程中transition动画不会执行,大坑啊,如果有解决方案的,请留言告知下,万分感谢。。。

看完了这篇文章,相信你对“CSS3中-webkit-overflow-scolling的示例分析”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


文章题目:CSS3中-webkit-overflow-scolling的示例分析
URL地址:http://kswsj.cn/article/gcjhss.html

其他资讯