-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. 【原创】基于NodeJS Express框架开发的一个VIP视频网站项目及源码分享

    项目名称:视频网站项目 开发语言:HTML,CSS(前端),JavaScript,NODEJS(expres)(后台) 数据库:MySQL 开发环境:Win7,Webstorm 上线部署环境:Linu ...

  2. Linux:用户和组总结

    从创建文件说起:useradd xiaomi           这里是创建了xiaomi用户 默认系统还会创建:/home/xiaomi  /var/mail/xiaomi        即家目录和 ...

  3. STM32串口IAP实验笔记

    STM32的IAP功能确实方便,以前对此如何实现有所了解,但是一直没去测试,这两天来练了下,可谓困难重重,搞了两天问题也一一解决,下面做些简要的笔记 IAP就是在线应用编程,方便程序升级,可以不用打开 ...

  4. JavaWeb+MySql分页封装

    前段时间因为需要所以写一个JavaWeb+MySql的分页封装类,附上代码.技术有限写得不好请多多指教. 1.首先贴上Eneity类 package com.zx.pageUtil; import j ...

  5. 清北学堂模拟赛d2t6 分糖果(candy)

    题目描述总共有n颗糖果,有3个小朋友分别叫做L,Y,K.每个小朋友想拿到至少k颗糖果,但这三个小朋友有一个共同的特点:对3反感.也就是说,如果某个小朋友拿到3颗,13颗,31颗,333颗这样数量的糖果 ...

  6. 清北学堂模拟赛d7t6 拯救世界

    分析:如果题目中没有环的话就是一道裸的最长路的题目,一旦有环每个城市就会被救多次火了.把有向有环图变成有向无环图只需要tarjan一边就可以了. #include <bits/stdc++.h& ...

  7. 背包again

    Gy最近学习了01背包问题,无聊的他又想到了一个新的问题,给定n个物品的价值,和01背包一样,每个物品只能选1次或0次,求最小不能被得到的价值. 输入 第一行一个正整数T(T <= 100),表 ...

  8. 20180620关于使用xtrabackup热还原数据库

    参看:http://www.cnblogs.com/waynechou/p/xtrabackup_backup.html http://www.cnblogs.com/waynechou/p/xtra ...

  9. CCEditBox/CCEditBoxImplMac

    #ifndef __CCEditBoxIMPLMAC_H__ #define __CCEditBoxIMPLMAC_H__ #include "cocos2d.h" #if (CC ...

  10. 【Android开发VR实战】三.开发一个寻宝类VR游戏TreasureHunt

    转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53939303 本文出自[DylanAndroid的博客] [Android开发 ...