dom内容区域的滚动overflow,scroll
去掉手机上点击点中的默认高亮效果
-webkit-tap-highlight-color: rgba(0,0,0,0);
ios手动启动一下监听touch事件以响应css伪类:
document.addEventListener("touchstart", function(){}, true)
传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容
1. 弹性滚动 android3+与ios5+版本增加了一个新的属性:overflow-scrolling
这个弹性滚动感觉起来像原生应用,因为这个本来就是原生的滚动。你只需要向可滚动区域增加一行代码。
隐藏的问题,由于使用硬件渲染,这个在手机端safarai会导致z轴偏高于static,但不会高于相应z-index设置的元素.
参考:https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
//-webkit-overflow-scrolling: touch;
.container{
...
overflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch;
}
<div class="wrapper">
<div class="container">
<div class="item">....</div>
<div class="item">....</div>
<div class="item">....</div>
<div class="item">....</div>
<div class="item">....</div>
</div>
</div>
2.使用iscroll
参考http://www.cnblogs.com/PeunZhang/p/3553020.html
dom内容区域的滚动overflow,scroll的更多相关文章
- 通过overflow: scroll;来实现部分区域的滚动
在移动端中,我们希望元素的滚动,可以通过一些插件的使用来实现滚动,当然也可以自己来实现. 比如:对于某一个区域,我们可以限制好高度之后,设定:overflow-y: scroll; 这样,就可以实现滚 ...
- CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
- iOS菜单滚动联动内容区域功能实现
平时开发APP中关于此功能还是比较经常碰到,本实例借用三个开源的插件,并对其中一个进行修改调整实现出想要的效果:本文重点介绍修改的内容跟三个插件的运用,这三个插件还可以各自扩展到其它项目的运用: 效果 ...
- iScroll框架解析——Android 设备页面内 div(容器,非页面)overflow:scroll; 失效解决(转)
移动平台的活,兼容问题超多,今儿又遇到一个.客户要求在弹出层容器内显示内容,但内容条数过多,容器显示滚动条.按说是So easy,容器设死宽.高,CSS加属性 overflow:scroll; -we ...
- 超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)
超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <tem ...
- [转] 设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿
设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿,所以在这个div上加一个css: -webkit-overflow-scrolling : touch; 在苹果手机上使用- ...
- overflow:scroll 滚动条不显示
overflow:scroll 滚动条不显示 ::-webkit-scrollbar-thumb 可能因为 自定义的滚动条height比元素可展示内容大
- 滚动锁定 scroll lock 键有什么用?
滚动锁定 scroll lock 键有什么用? 中文名称:滚动锁定键 按下此键后在Excel等按上.下键滚动时,会锁定光标而滚动页面:如果放开此键,则按上.下键时会滚动光标而不滚动页面. ...
- 解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题
解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-o ...
随机推荐
- Oracle_11g中解决被锁定的scott用户的方法
在安装完Oracle10g和创建完oracle数据库之后,想用数据库自带的用户scott登录,看看连接是否成功. 问题: 在cmd命令中,用“sqlplus scott/ tiger”登录时,老是提 ...
- Laravel操作上传文件的方法
1.获取上传的文件 $file=$request->file('file');2.获取上传文件的文件名(带后缀,如abc.png) $filename=$file->getClientOr ...
- css 菱形写法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 2016 ACM-ICPC Asia China-Final D 二分
题意:一共有N个冰淇淋球,做一个冰淇淋需要K个球,并且由于稳定性,这K个球还必须满足上下相邻的下面比上面大至少两倍.先给出N个球的质量,问最多能做出多少个冰淇淋? 思路:二分答案并对其检验. 检验标准 ...
- C语言进阶——注释符号12
注释可能大认为非常简单,但是注释其实在C语言中很关键,来看下面一段对话. ---学生: 老师,我觉得注释没有必要深究,因为很简单,对程序功能也没有影响. ---老师: 注释是C语言最重要的工具,我们先 ...
- 012---Django的用户认证组件
知识预览 用户认证 回到顶部 用户认证 auth模块 ? 1 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的 ...
- Eclipse字体修改
第一步: 第二步: 第三步: 第四步: 第五步: 第六步:
- Android 懒加载简单介绍
1.懒加载介绍 1.1.效果预览 1.2.效果讲解 当页面可见的时候,才加载当前页面. 没有打开的页面,就不会预加载. 说白了,懒加载就是可见的时候才去请求数据. 1.3.懒加载文章传送门 参考文章: ...
- linux下解压命令大全(转)
.tar 解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)———————————————.gz解压1:gun ...
- 十、mysql之索引原理与慢查询优化
mysql之索引原理与慢查询优化 一.介绍 1.什么是索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还 ...