专栏首页前端博客:https://alili.tech移动端弹性滑动以及vue记录滑动位置

抱歉,你查看的文章已删除

移动端弹性滑动以及vue记录滑动位置

原文链接

https://segmentfault.com/a/1190000012857661

-webkit-overflow-scrolling介绍

-webkit-overflow-scrolling: auto  |  touch;

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

兼容写法

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

如何使用

上代码:

<div class="scrollContainer">
     <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>  
     </ul>
</div>
.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);

需求

在vue项目中,我们可能会遇到这样的需求,例如:

商品列表页中,点击某一商品,进入到详情页。

从详情页中返回到商品列表页,页面应当显示的页面应当是之前的样子。

也就是说,滚动条的位置应该缓存下来;

思路

  1. 商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面,这样,在详情页面返回的时候,页面不至于重新加载。
  2. 在商品列表生命周期activated中,监听当前scrollContainer父元素的滚动事件,滚动时的回调中,获取到scrollTop(滚动条距离滚动元素即scrollContainer的距离)的值,存入到以及在deactivated中移除掉当前滚动事件的监听。
  3. 在商品列表中,点击进入详情页中的时候,将滚动条位置被缓存下来了,你可以放到sessionStorage|localStorage中。当然,如果你使用了vuex,可以直接将值放入vuex中进行管理;
  4. 从详情页中返回的时候,同时要做这样的操作,将你存入缓存中的scrollTop值重新赋予给当前div的滚动条
  5. Ok,思路就是这样子,大功告成。

vue中具体实现

我是用的vuex进行管理的滚动条位置,实现代码如下:

<div class="scrollContainer" ref="scroll">    //加了一个ref,用于获取当前dom 
     <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>  
     </ul>
</div>
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事件
}

后话

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 隔行变色

    河湾欢儿
  • <li>标签

    <li> 标签定义列表,<li> 元素通常与有序列表 (<ol>) 和无序列表 (<ul>) 一起运用。

    Html5知典
  • Cypress学习12-父子元素定位

    若要在元素中获取所有下一个同级DOM元素,直到另一个元素,请使用.next until()命令。

    上海-悠悠
  • Pug迭代

    听着music睡
  • pyhon 列表的增删改查

    py3study
  • 第3章 排列清单控制标记

    排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另外一种列表。对于概况因特网上的内容,列表特别重要。

    py3study

扫码关注云+社区

领取腾讯云代金券