通过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 ...
随机推荐
- CodeForces 577E Points on Plane(莫队思维题)
题目描述 On a plane are nn points ( x_{i}xi , y_{i}yi ) with integer coordinates between 00 and 10^{6} ...
- java反射的补充:桥接方法以及Spring中一些工具类
在上一篇博文中:http://www.cnblogs.com/guangshan/p/4660564.html 源码中有些地方用到了 this.bridgedMethod = BridgeMethod ...
- jQuery-File-Upload外部按钮触发上传
这个控件功能还不错,但是对于外部调用上传有点压力. 比如说,他可以实现在添加一个文件后为文件添加一个上传按钮,这个是写在add中的,可以调用data.submit()提交数据 但是如果我要实现外部按钮 ...
- Android-ListView-(BaseAdapter使用)
在Android中就提供了专门列表显示条目的控件,ListView控件,ListView控件不是一次性加载全部数据,他是只加载用户在屏幕看得到的数据,当用户滑动的过程中在去加载新的数据,同时会自动销毁 ...
- react学习笔记(1):从前后端分离到项目部署
我来到现在这家公司有一年多的时间,一直做的是财政系统相关的产品,前端的技术栈用的是传统的jQuery+bootStrap+requireJs,随着项目的开发,越来越多的弊病凸显出来. 首先是前后端的代 ...
- docker+selenium Grid搭建自动化分布式测试环境
自动化测试需要考虑到兼容性的时候,之前的做法是每个执行机上安装不同版本的浏览器,实际上这样做会很浪费硬件资源,现在有了docker容器化技术,让一切变得简单. 工具清单: 语言:python 2.7 ...
- UML uml建模工具
UML建模工具 一.UML的概念: 参考百度百科: https://baike.baidu.com/item/%E7%BB%9F%E4%B8%80%E5%BB%BA%E6%A8%A1%E8%AF%AD ...
- mvn install 报错Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2 错误: 找不到符号
报错信息 在Eclipse中执行mvn install时,console端显示如下报错信息: [ERROR] Failed to execute goal org.apache.maven.plugi ...
- jquery遍历-filter()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- luogu P1518 两只塔姆沃斯牛 The Tamworth Two
luogu P1518 两只塔姆沃斯牛 The Tamworth Two 题目描述 两只牛逃跑到了森林里.农夫John开始用他的专家技术追捕这两头牛.你的任务是模拟他们的行为(牛和John). 追击在 ...