通过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 ...
随机推荐
- JavaEE互联网轻量级框架整合开发(书籍)阅读笔记(8):装配SpringBean概述(如何合理使用装配级别)
一. 装配Bean概述 关于如何将自己开发的Bean配置到Spring IoC容器中,大部分场景下,我们都会使用ApplicationContext的具体实现类,因为对应的Spring IoC容器功 ...
- 在Lua中封装一个调试日志(附lua时间格式)
--自己封装一个Debug调试日志 Debug={} Info={} local function writeMsgToFile(filepath,msg) end function Debug.Lo ...
- 开源SLAM
GitHub 上优秀的开源SLAM repo (更新中):https://www.jianshu.com/p/464ca0d0c254 当前的开源SLAM方案:https://www.cnblogs. ...
- jquery cookie用法
jquery cookie用法(获取cookie值,删除cookie) cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使 ...
- 学习python4
文件系统实现文件的增删改查 UnicodeDecodeError: 'gbk' codec can't decode byte 0x9a in position 8: illegal multibyt ...
- react学习笔记(1):从前后端分离到项目部署
我来到现在这家公司有一年多的时间,一直做的是财政系统相关的产品,前端的技术栈用的是传统的jQuery+bootStrap+requireJs,随着项目的开发,越来越多的弊病凸显出来. 首先是前后端的代 ...
- vector容器(一)
一. Vector简要描述 vector是C++标准模版库STL提出的一种顺序存储结构,之所以称之为“容器”,是因为vector是一个模板类,它允许我们重复利用已有的实现构造自己的特定类型下的数据结构 ...
- Windows7系统安装TensorFlow深度学习框架全过程
本来以为很好安装的一个东西,硬是从晚上九点搞到十二点,安装其实并不难,主要是目前网上的教程有很多方案完全不一样,有根据pip安装的,有根据docker安装的等等,看得我眼花缭乱,好不容易找到一个靠谱点 ...
- xmlns 与 targetNamespace 的解释
test.xsd文件: <?xml version="1.0" encoding="UTF-8"?> <xs:schema elementFo ...
- 爬虫开发11.scrapy框架之CrawlSpider操作
提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法二:基 ...