分享更有价值
被信任是一种快乐

CSS3中webkit-overflow-scolling怎么使用

文章页正文上

这篇文章主要介绍“CSS3中webkit-overflow-scolling怎么使用”,在日常操作中,相信很多人在CSS3中webkit-overflow-scolling怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS3中webkit-overflow-scolling怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
我们都知道在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属性具体代码如下:

.div-c{width:100%;height:2000px;overflow:auto;/*测试发现一定要设定这个值才起作用*/-webkit-overflow-scrolling:touch;} 我要滚动啊,,在ios要顺畅啊

相关推荐: jquery如何给select增加选项

这篇文章主要介绍“jquery如何给select增加选项”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery如何给select增加选项”文章能帮助大家解决问题。 两种方法:1、用“$(“select”).appe…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册