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 ...
随机推荐
- 在WebAPI中调用其他WebAPI
client.BaseAddress = new Uri("http://xxx.xxx.xx.xx:xxxx/); client.DefaultRequestHeaders.Accept. ...
- 动态调试smali代码
Android Killer对应用进行反编译为smali代码,看看Manifest文件中application标签里面是否有android:debuggable="true",没有 ...
- python基础之流程控制、数字和字符串处理
流程控制 条件判断 if单分支:当一个“条件”成立时执行相应的操作. 语法结构: if 条件: command 流程图: 示例:如果3大于2,那么输出字符串"very good" ...
- 3714: [PA2014]Kuglarz
3714: [PA2014]Kuglarz 链接 思路: 好题.对于每个点都需要确定它的值,那么一个点可以直接询问[i,i]来确定,或者已经知道了[i,j]和[i+1,j]推出来. 但是可能产生冲突, ...
- cycling -avoid the vicious cycle
‘Numerous' studies in the past appear to have shown a link between cycling and ED. The researchers a ...
- 有哪些值得一读的优秀开源 JS 代码
有哪些值得一读的优秀开源 JS 代码 采纳 首先,没有“必须”读的源代码(我发现我特喜欢说首先……),因为读源代码不是做功课,只有用到或是非常好奇才会去读,当成“日常”去做是没有意义的. 当然有些人会 ...
- Python 3基础教程4-变量
本文介绍变量,什么是变量呢,可以这样理解:变量是一个容器,这个容器可以用来存储值,而且可以被其他对象引用. 看看下面的demo.py # 这里介绍 变量 # 变量可以是数字var1 = 5print( ...
- python 学习分享-线程
多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...
- ironic baremetal node status
参考: https://docs.openstack.org/ironic/latest/contributor/states.html https://docs.openstack.org/iron ...
- Ext JS 的一个非常好的学习网站
起飞网 http://www.qeefee.com/zt-extjs 发现一个非常好的学习ExtJS的中文网站