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

  比如:对于某一个区域,我们可以限制好高度之后,设定: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在滑动时出现的问题。 

通过overflow: scroll;来实现部分区域的滚动的更多相关文章

  1. iScroll框架解析——Android 设备页面内 div(容器,非页面)overflow:scroll; 失效解决(转)

    移动平台的活,兼容问题超多,今儿又遇到一个.客户要求在弹出层容器内显示内容,但内容条数过多,容器显示滚动条.按说是So easy,容器设死宽.高,CSS加属性 overflow:scroll; -we ...

  2. [转] 设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿

    设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿,所以在这个div上加一个css: -webkit-overflow-scrolling : touch; 在苹果手机上使用- ...

  3. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

  4. overflow:scroll 滚动条不显示

    overflow:scroll 滚动条不显示 ::-webkit-scrollbar-thumb 可能因为 自定义的滚动条height比元素可展示内容大

  5. 解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题

    解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-o ...

  6. ios下使用overflow scroll情况下,到达最极端的情况时会拖动整个页面的解决办法

    今天开发ipad webapp时,遇到个问题就是在支持内部滚动(overflow:scroll)的页面中,在滚到到最极端(最上或者最下时),会拖动整个页面,带来不好的用户体验. 方法一,从网上找到的: ...

  7. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  8. 父元素设置固定宽度并设置overflow:scroll,如何让子元素撑开父元素

    <div class="a"> <div class="b"> <div class="c">内容内容, ...

  9. overflow:scroll

    <div style="position: relative;"> <div class="container mycontent" styl ...

随机推荐

  1. JS 单例模式

    <parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...

  2. 编写高质量代码改善C#程序的157个建议——建议124:考虑在命名空间中使用复数

    建议124:考虑在命名空间中使用复数 如果有一组功能相近的类型被分到了同一个命名空间想,可以考虑为命名空间使用复数. 最典型的例子有,在FCL中,我们需要把所有的非泛型集合类集中在一起存放,所以就有了 ...

  3. 编写高质量代码改善C#程序的157个建议——建议110:用类来代替enum

    建议110:用类来代替enum 枚举(enum)用来表示一组固定的值.例如,为了表示星期信息,我们可以定义枚举Week: enum Week { Monday, Tuesday, Wednesday, ...

  4. Android AIDL的用法

    一.什么是AIDL服务   一般创建的服务并不能被其他的应用程序访问.为了使其他的应用程序也可以访问本应用程序提供的服务,Android系统采用了远程过程调用(Remote Procedure Cal ...

  5. SPOJ - AMR11A(DP)

    Thanks a lot for helping Harry Potter in finding the Sorcerer's Stone of Immortality in October. Did ...

  6. sql 的REPLACE

    REPLACE 用第三个表达式替换第一个字符串表达式中出现的所有第二个给定字符串表达式. 语法 REPLACE ( 'string_expression1' , 'string_expression2 ...

  7. [转]Control的Invoke和BeginInvoke

    转自:Control的Invoke和BeginInvoke  作者:Kuffy Wang 近日,被Control的Invoke和BeginInvoke搞的头大,就查了些相关的资料,整理如下.感谢这篇文 ...

  8. Centos7.6下使用docker方法安装stf

    使用Docker镜像安装 一,在centos上安装Docker 很简单,直接 yum install docker 即可开启docker服务 在centos中开启服务可以使用systemctl sta ...

  9. [bzoj3714] [PA2014] Kuglarz(最小生成树)

    我们考虑这个题...思路比较神仙. 就是我们设\(sum[i]\)为前i个的区间里的情况,然后我们知道\(sum[j]\)的话,我们就可以知道\(j-i\)的情况了 所以说这很像最小生成树里面的约束条 ...

  10. Selenium爬取元素下子元素方法

    Selenium提供了一下方法来定义一个页面中的元素: find_element_by_id find_element_by_name find_element_by_xpath find_eleme ...