十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍“CSS3中webkit-overflow-scolling怎么使用”,在日常操作中,相信很多人在CSS3中webkit-overflow-scolling怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS3中webkit-overflow-scolling怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联公司是一家以网络技术公司,为中小企业提供网站维护、网站设计制作、成都网站建设、网站备案、服务器租用、域名注册、软件开发、微信小程序定制开发等企业互联网相关业务,是一家有着丰富的互联网运营推广经验的科技公司,有着多年的网站建站经验,致力于帮助中小企业在互联网让打出自已的品牌和口碑,让企业在互联网上打开一个面向全国乃至全球的业务窗口:建站欢迎联系:028-86922220
我们都知道在ios的safari浏览器和app内核浏览器中,当一个h6页面内容超出屏幕高度,我们手指去滑动屏幕的时候,只要手势一离开屏幕,滚动立刻结束。这时候我们可以通过设置-webkit-overflow-scrolling=touch来使页面可以顺畅滚动,但是设置这个也会引出许多问题。
1、单独对body设置-webkit-overflow-scrollingtouch是无效的,需要针对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属性具体代码如下:
经过反复测试发现如下设置也是能有效触发-webkit-overflow-scrolling属性的,具体代码如下:
.content-box{
height:500px;/*经过测试后发现只要设定的这个高度小于屏幕高度,-webkit-overflow-scrolling属性也能有效触发*/
border:solid1pxgreen;
overflow:auto;
-webkit-overflow-scrolling:touch;}
有效果的哦。。。
当然,以上的版本就得在html渲染结束的时候去改变他的高度,以达到和屏幕高度一致,但是这种方式的维护性太差,后来又找到一种解决方案,具体代码如下:
.ios-scroll-father{
position:absolute;
top:0;
bottom:0;
left:0;
width:10rem;
height:100%;}
.ios-scroll-child{
position:absolute;
top:0;
bottom:0;
left:0;
width:10rem;
overflow:auto;}
-webkit-overflow-scrollingtouch
我要完美解决ios的顺畅滑动问题啊,,,来试试咯。演示,请自己添加代码到超出屏幕内容哦~
这里,要提个醒,设置-webkit-overflow-scrolling属性的同时要么不要设定height,要么height+padding的高度不要超出屏幕的高度,不然你会发现等你滚动到顶部或者底部的时候会被截取掉一部分,需要你在滑动才能出现。。。这是个坑啊,本人一不小心设定高度百分百和padding后发现了这种现象,然后找来找去都找不到问题,只能删减代码慢慢排查。
4、当然,如果只是这些问题,那还真是好解决,可是,可是,某天写了个列表,需要做滚动分页特效,这时候我去兼听滚动条的滚动事件,发现scrollTop不会时时更新,要等到页面停止滚动后才能获取到scrollTop值。
到此,关于“CSS3中webkit-overflow-scolling怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!