首页 / CSS3 / 分享CSS3中-webkit-overflow-scolling的使用心得

分享CSS3中-webkit-overflow-scolling的使用心得

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了分享CSS3中-webkit-overflow-scolling的使用心得，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3366字，纯文字阅读大概需要5分钟。

内容图文

滚动条在页面布局中用得也比较多，这篇文章就和大家分享一下，我使用-webkit-overflow-scolling的心得，避免小伙伴们踩坑，有需要的可以过来看看。

我们都知道在ios的safari浏览器和app内核浏览器中，当一个h5页面内容超出屏幕高度，我们手指去滑动屏幕的时候，只要手势一离开屏幕，滚动立刻结束。这时候我们可以通过设置-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属性具体代码如下：

<style>.div-p{ width: 100%; height: 500px;/*这是测试值，具体针对项目需求设置，不要超出子容器内容高度*/overflow: hidden;/*设不设定这个值对-webkit-overflow-scrolling没有影响*/}
.div-c{ width: 100%; height: 2000px; overflow: auto;/*测试发现一定要设定这个值才起作用*/ -webkit-overflow-scrolling: touch;}</style>
<div class="div-p">
<div class="div-c">我要滚动啊，，在ios要顺畅啊</div>
</div>

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

<style>
.content-box{
  height: 500px;/*经过测试后发现只要设定的这个高度小于屏幕高度，-webkit-overflow-scrolling属性也能有效触发*/
  border: solid 1px green;
  overflow: auto;
  -webkit-overflow-scrolling: touch;}
</style>
<body>
<div class="content-box">哎呀我是要滚动的啊<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
有效果的哦。。。
</div>
</body>

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

<style>
.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-scrolling touch
</style>
<div class="ios-scroll-father">
<div class="ios-scroll-child">
我要完美解决ios的顺畅滑动问题啊，，，来试试咯。演示，请自己添加代码到超出屏幕内容哦~
</div>
</div>

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

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

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

以上，是在开发项目过程遇到的，结合查找的资料反复测试得到的结论，如有不对的，欢迎指出。

以上就是分享CSS3中-webkit-overflow-scolling的使用心得的详细内容。

内容总结

以上是互联网集市为您收集整理的分享CSS3中-webkit-overflow-scolling的使用心得全部内容，希望文章能够帮你解决分享CSS3中-webkit-overflow-scolling的使用心得所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/416237.html

来源：【匿名】