zoukankan      html  css  js  c++  java
  • 通过overflow: scroll;来实现部分区域的滚动

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

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

      这里通过 -webkit-overflow-scrolling: touch 可以很好解决ios在滑动时出现的问题。 

  • 相关阅读:
    将requirejs进行到底(一)
    localStorage.ie6.js
    再见,唐家岭!
    彻底理解JavaScript原型
    总结javascript继承的两种方式的N中写法
    Sizzle引擎执行的流程图
    武功唯快不破
    密码强度
    各大浏览器内核(Rendering Engine)
    Angularjs中编写指令模版
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/7044882.html
Copyright © 2011-2022 走看看