移动端滑动时页面惯性滑动overflow-scrolling: touch
-webkit-overflow-scrolling:auto | touch;
auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止
touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
兼容写法:
over-flow: auto; /* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
<div class="scrollContainer">
<div class="content">
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容4</p>
<p>内容5</p>
<p>内容6</p>
<p>内容7</p>
<p>内容8</p>
<p>内容9</p>
<p>内容10</p>
</div>
</div>
.scrollContainer{
position: fixed;
top: 0;
height: 1770px;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
} .content{
height: 6000px;
width: 100%;
background: skyblue;
z-index: 99;
}
有几率出现的bug
1.父级元素scrollContainer加上定位position,滑动几次后可滚动区域会卡主,不能在滑动
2.快速滑动页面会出现空白,滑动停止后内容才显示
相关文章详细解读
移动端滑动时页面惯性滑动overflow-scrolling: touch的更多相关文章
- 移动端H5页面惯性滑动监听
移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...
- 关于含RecyclerView的fragment来回切换时页面自动滑动到底部的解决方法
原因: 在fragment中来回切换时RecyclerView获得了焦点,而RecyclerView的 focusableOnTouchMode属性默认是true,所以在切换时RecyclerView ...
- viewpager滑动时页面不能刷新
有一种解决方法就是覆盖PagerAdapter中的getItemPosition()方法,这种方案虽然简单,但是因为这种方法是让每次呼叫PagerAdapter时,都会遍历childView,通过ge ...
- 小程序开发:canvas在画布上滑动,页面跟着滑动问题
微信小程序官方文档有说明,disable-scroll="true" 可以阻止页面下拉和滚动.这里有个坑,disable-scroll在真机上如果要生效,那么要给canvas绑定一 ...
- 阻止touchslider事件冒泡,防止左右滑动时出发全局滑动事件
最近适用mui开发一个项目,全局有个侧滑菜单offCanvasSideScroll,首页用了一个touchslider插件来实现行的左右滚动 touchslider的当滚动方向与侧滑菜单滚动方向一致时 ...
- vue移动端出现遮罩层时在遮罩层滑动时禁止遮罩层下方页面滑动
h5页面 点击出现弹框时 在遮罩层上面滑动时 下方的页面会出现滑动现象 解决方法 我知道的有以下两种 在遮罩层标签上添加@touchmove.prevent 把遮罩层显示时把下方的父盒子css设置为固 ...
- Axure8 实现移动端页面上下滑动效果
目前,很多Axure新人都在问如何实现界面上下滑动效果,网上相关的教程也不少,各有各的方法,但是很少有教程对滑动界限设置做出比较详细的说明,其实在工作过程中,个人发现练好Axure是很有意提升逼格的, ...
- (转载) Scrollview 嵌套 RecyclerView 及在Android 5.1版本滑动时 惯性消失问题
Scrollview 嵌套 RecyclerView 及在Android 5.1版本滑动时 惯性消失问题 标签: scrollviewandroid滑动嵌套 2015-07-16 17:24 1112 ...
- 完美解决移动端H5页面的滑动穿透问题
同事的分享,记录下来. 代码如下: css: body.modal-open { position: fixed; width: 100%; } js: // 兼容低版本 document.scrol ...
随机推荐
- Django学习笔记:为Model添加Action
|- Django版本:1.8 |- Python版本:3.4 models.py 1 class Story(models.Model): #编辑Story状态 STATUS_CHOICES = ( ...
- 4.3.1 ThreadLoacl简单使用
我们都知道 SimpleDateFormat 这个类是线程 不安全的,那么我下面的程序执行就会遇到问题 public class ParseDateDemo { private static fin ...
- win10 64位 python3.6 django1.11 MysqlDB No module named 'MySQLdb' 安装MysqlDB报错 Microsoft Visual C++ 14.0 is required
在python3.6中操作数据库,再按python2.7安装MySQLdb进行数据库连接已经不可用了,我使用的是另外一个方法:PyMySQL,安装好之后还是不能直接连接MySQL的,启动项目后报No ...
- mongoTemplate查询
1.精确查询用“is” Criteria criteria=new Criteria("namespaceName"); criteria.is(namespaceName); Q ...
- js关系图库:aworkflow
auto-workflow 用于快速构建各种关系图的库,比如流程图,可视化执行流等 github地址:https://github.com/auto-workflow/AWorkflow 快速开始 n ...
- C#和C++语言使用方面的区别
本人觉得C#是世界上最优美的语言,也可以说是一门傻瓜语言,入门成本低,上手快得到许多人的青睐,但是C#并没有在行业内得到大家的首肯,反倒是C/C++人才比较紧俏:本人在学习过程中将C#和C++语言使用 ...
- Understanding sun.misc.Unsafe
转自: https://dzone.com/articles/understanding-sunmiscunsafe The biggest competitor to the Java virtua ...
- 命令行执行 mvn package 和常见mvn命令
cmd 打开命令提示符, 然后打开代码所在目录,例如 d: cd d:/code 执行 mvn package Maven常用命令: 1. 创建Maven的普通java项目: mvn arc ...
- [LeetCode 题解]: Two Sum
前言 [LeetCode 题解]系列传送门: http://www.cnblogs.com/double-win/category/573499.html 1.题目描述 Given an a ...
- pycharm注册
1.官方下载专业版,并安装 http://www.jetbrains.com/pycharm/download/#section=windows 2.下载crack激活包 http://idea.la ...