码迷,mamicode.com
首页 > 其他好文 > 详细

通过overflow: scroll;来实现部分区域的滚动

时间:2017-06-18 18:59:16      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:color   解决方法   内核   one   display   20px   isp   pre   overflow   

  在移动端中,我们希望元素的滚动,可以通过一些插件的使用来实现滚动,当然也可以自己来实现。

  比如:对于某一个区域,我们可以限制好高度之后,设定:overflow-y: scroll; 这样,就可以实现滚动了,并且我们可以通过 overflow: scroll的元素的scrollTop来控制其行为。 

  但是,这种方法是存在问题的,因为在某些手机上回出现难看的滚动条,一般的解决方法是:

  ios:

margin-right: -20px;
padding-right: 20px;

  当然,这个方法用在webkit内核上也是一样的。

  

  webkit内核有自己的私有属性可以控制滚动条。

  webkit:

::-webkit-scrollbar{
  display: none
}

  

  

  另外,在ios设备中,利用overflow来模拟滚动,会出现卡顿的现象,可以通过设置-webkit-overflow-scrolling: touch来解决,原因是设置后ios会为其创建一个UIScrollView,利用硬件来加速渲染。

    

 

通过overflow: scroll;来实现部分区域的滚动

标签:color   解决方法   内核   one   display   20px   isp   pre   overflow   

原文地址:http://www.cnblogs.com/zhuzhenwei918/p/7044882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!