通过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在滑动时出现的问题。
通过overflow: scroll;来实现部分区域的滚动的更多相关文章
- iScroll框架解析——Android 设备页面内 div(容器,非页面)overflow:scroll; 失效解决(转)
移动平台的活,兼容问题超多,今儿又遇到一个.客户要求在弹出层容器内显示内容,但内容条数过多,容器显示滚动条.按说是So easy,容器设死宽.高,CSS加属性 overflow:scroll; -we ...
- [转] 设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿
设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿,所以在这个div上加一个css: -webkit-overflow-scrolling : touch; 在苹果手机上使用- ...
- CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
- overflow:scroll 滚动条不显示
overflow:scroll 滚动条不显示 ::-webkit-scrollbar-thumb 可能因为 自定义的滚动条height比元素可展示内容大
- 解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题
解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-o ...
- ios下使用overflow scroll情况下,到达最极端的情况时会拖动整个页面的解决办法
今天开发ipad webapp时,遇到个问题就是在支持内部滚动(overflow:scroll)的页面中,在滚到到最极端(最上或者最下时),会拖动整个页面,带来不好的用户体验. 方法一,从网上找到的: ...
- 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法
内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...
- 父元素设置固定宽度并设置overflow:scroll,如何让子元素撑开父元素
<div class="a"> <div class="b"> <div class="c">内容内容, ...
- overflow:scroll
<div style="position: relative;"> <div class="container mycontent" styl ...
随机推荐
- 编写高质量代码改善C#程序的157个建议——建议156:利用特性为应用程序提供多个版本
建议156:利用特性为应用程序提供多个版本 基于如下理由,需要为应用程序提供多个版本: 应用程序有体验版和完整功能版. 应用程序在迭代过程中需要屏蔽一些不成熟的功能. 假设我们的应用程序共有两类功能: ...
- ioctlsocket()函数是干什么用的?它返回值是什么?共有几个参数?它的各个参数是干什么用的?
1. ioctlsocket() 简述: 控制套接口的模式. #include <winsock.h> int PASCAL FAR ioctlsocket( SOCKET s, l ...
- hadoop之MapReduce学习
为什么需要MapReduce 进行分析数据,计算方便和复用性强:而且是文件级别的 进程包括三个 mrappmaster:负责整个程序管理 maptask:负责map阶段的整个过程 reducemask ...
- GC分析中提到的根对象是什么
一些文章在分析GC时,不可逾越的说到要先从根对象扫描出不可达对象,然后标记那些不可达对象为垃圾.那么源头根对象是什么玩意呢? 几分钟后google到比较可信源是http://stackoverflow ...
- [Windows] IIS6 部署ISAPI
环境: OS:Windows Server 2003 Enterprise sp2 34位 IIS:6.0 ISAPI: delphi xe 编译的webbroker isapi dll 32位 ( ...
- C#基础入门 一
C#基础入门 一 基本输入输出函数 简单程序输出helloworld using System;//引入System库 namespace MainClass { class MainClass { ...
- Intel Galileo development documentation
Intel Galileo development Documentation Author:Liutianchen 1552227, Department of Computer Science,E ...
- RobotFramework做接口自动化(内部接口需要登录token)
背景: 项目中需要做接口自动化测试,使用robot,有一个收货地址列表的接口直接传参数访问时会返回:{"msg":"缺少参数","code" ...
- Jquery 【on事件】
一.on事件的定义和用法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() 方 ...
- Sumsets(数学)
Sumsets Time Limit: 2000MS Memory Limit: 200000K Total Submissions: 14964 Accepted: 5978 Description ...