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

  比如:对于某一个区域,我们可以限制好高度之后,设定: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. [Lua快速了解一下]Lua的函数

    -recurrsive function fib(n) end ) + fib(n - ) end -closure 示例一 function newCounter() return function ...

  2. Java泛型(泛型接口、泛型类、泛型方法)

    转载 转载出处:https://www.cnblogs.com/JokerShi/p/8117556.html 泛型接口: 定义一个泛型接口: 通过类去实现这个泛型接口的时候指定泛型T的具体类型. 指 ...

  3. centos 7 Hadoop2.7.4完全分布式搭建(一)

    (一)系统准备与安装 1.准备下载centos7 (百度自行下载)可以到开源镜像站下载,速度比较快,比如清华的或者阿里的 在vmware上安装 这里我用的是vmware12 打开Vmware 选择文件 ...

  4. html中怎么样让div并排显示

    html中的div默认是流式显示,每个div会占用一整行 <html> <head> <meta http-equiv="Content-Type" ...

  5. Android-监听操作系统短信

    想要访问Android操作系统的ContentProvider就需要明白以下原理: 在Android操作系统里面的 /packsges/目录: apps: 很多的系统应用,例如:联系人,浏览器,音乐播 ...

  6. Android-ListView-SimpleAdapter

    我在上一篇博客中Android-动态添加控件到ScrollView,写到可以用Java动态添加控件到Scrollview的孩子LinearLayout里面去,这种方式是不合理的,因为这种方式是一次性把 ...

  7. 数据库架构设计的三种模式:share nothing , share everythong , share disk

    数据库构架设计中主要有Shared Everthting.Shared Nothing.和Shared Disk: Shared Everthting:一般是针对单个主机,完全透明共享CPU/MEMO ...

  8. [转]解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader

    上篇文章中我们掌握了表面剔除和剪裁模式这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做成圆角矩形 例3:圆角矩形Shader好吧我承认在做这个例子的时候走了不少弯路,由于本人对矩 ...

  9. day04.2-迭代器

    1. 迭代器协议: 对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代(只能往后走,不能往前退). 2. 可迭代对象:实现了迭代器 ...

  10. file.delete()的优化

    //删除暂存的pdf File file =new File(pdfFilename); file.delete(); Path path2 = Paths.get(pdfFilename); Fil ...