-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. php第十八节课

    PDO 对不同的数据库连接使用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  2. Django 初学

    一.什么是web框架 框架,即framework  ['fremwɝk],特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞 ...

  3. 12. tie_breaker的使用原因和使用方法

    主要知识点: tie_breaker的使用原因和使用方法         一.tie_breaker的使用原因 dis_max,只是取分数最高的那个query的分数而已,完全不考虑其他query的分数 ...

  4. Package pdftex.def Error: PDF mode expected, but DVI mode detected!

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51646781 在如下使用LaTeX编译 ...

  5. [POJ2912]Rochambeau(并查集)

    传送门 题意: n个人分成三组,玩石头剪子布游戏,同一组的人只能出同样固定的的手势,其中有一个是裁判不属于任何组,可以出任意手势,给出m个信息x op y 表示x,y是从三个组里面随机抽取的或者是裁判 ...

  6. DOM对象属性(property)与HTML标签特性(attribute)

    HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...

  7. 【学QT】2 - QT/E环境的建立

    Arm-Linux嵌入式QT/E环境的建立(qt/e 3.x系列)          QT/E 3.x系列比QT/E 2.x系列有非常大的改进,大大提高了开发进度,不再使用tmake,安装也更简单.但 ...

  8. 解决Ubuntu下Apache不解析PHP问题

    这两天笔者遇到了一个很操蛋的问题——Apache无法解析PHP代码了,之前一直用的挺好的,突然就挂了,然后在网上疯狂的找解决办法,但是大都是php5的版本,而我却是7的版本,我就先顺便把5版本的解决方 ...

  9. ORACLE11G设置IP訪问限制

    出于数据安全考虑,对oracle数据库的IP做一些限制,仅仅有固定的IP才干訪问. 改动$JAVA_HOME/NETWORK/ADMIN/sqlnet.ora文件 添加下面内容(红色表示凝视): #开 ...

  10. 用Radeon RAMDisk在Windows 10中创建关机或重新启动不消失的内存虚拟盘

    之前用ImDisk创建的内存虚拟盘每次关机或重新启动后就会消失,想要开机自己主动创建内存虚拟盘尽管能够用批处理来实现,但还是有点不爽.下载试用了Radeon RAMDisk(Radeon_RAMDis ...