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

Posted 2020-09-23 Wayne Zhu

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

　　比如：对于某一个区域，我们可以限制好高度之后，设定：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，利用硬件来加速渲染。