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

  比如:对于某一个区域,我们可以限制好高度之后,设定: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. ZookeeperGettingStarted

    reference url:  http://zookeeper.apache.org/doc/trunk/zookeeperStarted.html#sc_FileManagement ZooKee ...

  2. 一篇文章让你快速入门 学懂Shell脚本

    Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的文件进行解析,然后执行这些功能,也可以说Shell脚本就是一系列命令的集合. Shell可以直接使用在win/Unix/Linux上面 ...

  3. 2019年第十届蓝桥杯省赛-迷宫(BFS/Excel大法)

    这题用dfs搜不出来,需要使用bfs并记录路径,设置好方向顺序跑就ok 正解类似:POJ-3984 迷宫问题 然而毕竟是暴力杯,我们的原则是代码能省就省(懒癌晚期 于是乎网上便出现了形形色色的题解,笔 ...

  4. redis整理の走进redis世界

    声明:原文摘自http://weibo.com/u/2446082491,谢谢他的分享! 在当前大型互联网应用以及提供云计算服务的时候,怎样保证系统在海量数据环境下的高性 能.高可靠性.高扩展性.高可 ...

  5. 基于JSP的B2C的网上拍卖系统_秒杀与竞价-JavaWeb项目-有源码

    开发工具:Myeclipse/Eclipse + MySQL + Tomcat 项目简介: 基于B2C的网上拍卖系统主要用于帮助人们应用互联网方便快捷买到自己所中意的商品,并参与到秒杀与竞拍当中.主要 ...

  6. 神器与经典--sp_helpIndex

    ======================================================= 每每和那些NB的人学习技术的时候,往往都佩服他们对各个知识点都熟捻于心,更佩服的是可以在 ...

  7. Slq怎么样获取首条记录和最后一条记录

    sql如何查询表的第一条记录和最后一条记录 方法一:使用top select TOP 1 * from apple;TOP 1 表示表apple中的第一条数据 select TOP 1 * from ...

  8. C++视频教程学习笔记

    1. 命名空间 用于解决命名冲突的问题 里面可以放函数.变量.结构体.类 可以嵌套 必须定义在全局作用域下 是开放的,可以随时往原先的命名空间中追加内容,而不是覆盖 实现命名空间下的函数和调用时,需要 ...

  9. OO 面向对象的概念

    面向对象的概念 一.什么是面向对象? 传统的:世间万物都是对象.例如:桌子,凳子,电脑等: 个人理解: 1.软件开发方法: 2.面向对象是一种解决问题和分析问题的(编程)一种思想: 3.他是通过面向过 ...

  10. 求二叉树第K层的节点个数+求二叉树叶子节点的个数

    size_t _FindLeafSize(Node* root)     //求二叉树叶子节点的个数    {        //static size_t count = 0;        if ...