-webkit-overflow-scrolling介绍

```
-webkit-overflow-scrolling: auto | touch;
```
auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止
touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

兼容写法

```
over-flow: auto; /* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
```

如何使用

上代码:
```

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

```
```
.scrollContainer{
width: 100px;
height: 50px;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
overflow-x: hidden;
}
.scrollContainer>ul>li{
height: 20px;
width: 100%;
}
```

可能会出现的bug

1.父级元素scrollContainer加上定位position: absolute|relative,滑动几次后可滚动区域会卡主,不能在滑动
    2.快速滑动页面会出现空白,滑动停止后内容才显示
此时,你应该给父级元素scrollContainer加上如下代码:
```
//解决第一个bug
z-index:1;

//解决第二个bug

-webkit-backface-visibility: hidden;

-webkit-transform: translate3d(0,0,0);



<h2>需求</h2>
在vue项目中,我们可能会遇到这样的需求,例如: 商品列表页中,点击某一商品,进入到详情页。 从详情页中返回到商品列表页,页面应当显示的页面应当是之前的样子。 也就是说,滚动条的位置应该缓存下来; <h2>思路</h2>
&nbsp;&nbsp;&nbsp;&nbsp;1.商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面,这样,在详情页面返回的时候,页面不至于重新加载。
&nbsp;&nbsp;&nbsp;&nbsp;2.在商品列表生命周期activated中,监听当前scrollContainer父元素的滚动事件,滚动时的回调中,获取到scrollTop(滚动条距离滚动元素即scrollContainer的距离)的值,存入到以及在deactivated中移除掉当前滚动事件的监听。
&nbsp;&nbsp;&nbsp;&nbsp;3.在商品列表中,点击进入详情页中的时候,将滚动条位置被缓存下来了,你可以放到sessionStorage|localStorage中。当然,如果你使用了vuex,可以直接将值放入vuex中进行管理;
&nbsp;&nbsp;&nbsp;&nbsp;4.从详情页中返回的时候,同时要做这样的操作,将你存入缓存中的scrollTop值重新赋予给当前div的滚动条
&nbsp;&nbsp;&nbsp;&nbsp;5.Ok,思路就是这样子,大功告成。 <h2>vue中具体实现</h2>
我是用的vuex进行管理的滚动条位置,实现代码如下:
//加了一个ref,用于获取当前dom

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

```
```
computed:{
...mapGetters([
"home_list_top" //vuex中的存放的滚动条的位置
])
}
...
methods:{
recordScrollPosition(e) {
this.$store.dispatch("setHomeListTop",e.target.scrollTop); //实时存入到vuex中
}
}
...
activated(){ //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了
this.$refs.scroll.scrollTop = this.home_list_top; //this.$refs.scroll拿到滚动的dom,即scrollContainer,this.home_list_top是存入到vuex里的值
this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition); //添加绑定事件
},
deactivated(){ //keep-alive 的页面跳转时,移除scroll事件
this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition); //清除绑定的scroll事件
}
```

后话

如果有更好的办法,互相交流。

移动端弹性滑动以及vue记录滑动位置的更多相关文章

  1. [Android Pro] 精确记录和恢复ListView滑动位置

    reference to : http://blog.csdn.net/welovesunflower/article/details/7926512 工作中遇到一个需求,对ListView某一项操作 ...

  2. 一个 Vue 的滑动按钮组件

    git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 bet ...

  3. vue 图片滑动登录

    前言 最近在研究图片滑动解锁 登录,说是要用阿里的那个验证,但是还是想自己手写下这个Demo 效果图是这样的: 本来是想用canvas 来实现的,但是类,后来还想用css 和图片来代替canvas 其 ...

  4. WebStorage记录滚动条位置

    因关注公众号<HTML5学堂>看到这篇文章 "利用本地存储,记录滚动条的位置" ,便好奇敲来试试,然后又看了一些关于WebStorage的资料 附上这篇文章的地址 ht ...

  5. 移动端网站的内容触摸滑动-Swiper插件

    手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...

  6. CMDS目的端数据库碎片整理记录

    CMDS目的端数据库碎片整理记录 看看数据库里面需要做整理的表有哪些,条件可以根据需求稍微改动一下 SQL> select * from ( 2 select a.owner, 3 a.tabl ...

  7. vue滚动+滑动删除标记(移动端)仿qq/微信

    安装组件 "vue-touch": "^2.0.0-beta.4", main.js引入 import VueTouch from 'vue-touch' Vu ...

  8. 移动端遮罩及阻止页面滑动,实用!!! 我们经常做一个fixed定位的遮罩和一个提示弹框,这时就要用到。记录--

    document.body.style.height = '100%'; document.body.style.overflow = 'hidden'; document.getElementByI ...

  9. vue 左右滑动效果

    个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架 ...

随机推荐

  1. office 2016最新安装及激活教程(KMS)【亲测有效】!!

    前言 博主的一个朋友,咳咳--你们懂得,想装office,于是我就上网找了一下激活的方法,亲测有效,而且也没有什么广告病毒之类的,还比较方便,所以传上来方便大家.好了,进入正题: 安装office 首 ...

  2. CentOS 7.2安装配置Vsftp服务器

    一.配置防火墙,开启FTP服务器需要的端口 CentOS 7.2默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop fi ...

  3. Nginx配置文件的高亮显示设置

    linux系统下vim或者vi编辑器默认是没有对nginx的语法高亮设置. 1.下载vi语法高亮配置到 ~/.vim/syntax,如果不存在则创建该目录,cd ~/.vim/syntax wget ...

  4. [LeetCode] 887. Super Egg Drop 超级鸡蛋掉落

    You are given K eggs, and you have access to a building with N floors from 1 to N.  Each egg is iden ...

  5. 00105_UDP和TCP协议

    1.UDP协议 (1)UDP是User Datagram Protocol的简称,称为用户数据报协议: (2)UDP是无连接通信协议,即在数据传输时,数据的发送端和接收端不建立逻辑连接: (3)当一台 ...

  6. 2、ceph-deploy之配置使用RBD

    说明 部署完ceph集群(active+clean状态)之后, 我们来实践下ceph block device(即RBD或RADOS block device). 我们需要在一台新的client节点上 ...

  7. Android --------- 自己定义VIew

    package com.example.coustomviewdemo; import android.R.interpolator; import android.content.Context; ...

  8. poj和hdu部分基础算法分类及难度排序

    最近想从头开始刷点基础些的题,正好有个网站有关于各大oj的题目分类(http://www.pythontip.com/acm/problemCategory),所以写了点脚本把hdu和poj的一些题目 ...

  9. bzoj3047:Freda的传呼机&&bzoj2125: 最短路

    完结撒花!!!!!!!!!!! 最后一题填坑1A仙人掌WWWWWWW我真流弊 首先把环拆开,环中每一个点连向环的根,然后搞LCA,答案就是套路的d[x]+d[y]-d[lca]*2 然后就可以发现,其 ...

  10. 【BZOJ 1598】 牛跑步

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1598 [算法] A*求k短路 [代码] #include<bits/stdc+ ...