移动端弹性滑动及vue记录滑动位置
时间：2023-03-31 11:55:40
CSS
-webkit-overflow-scrolling介绍-webkit-overflow-scrolling:auto|touch;auto：正常滚动，当手指离开触摸屏时，滚动立即停止，并且继续滚动的速度和持续时间与滚动手势的强度成正比。它还创建了一个新的堆栈上下文。兼容写溢出：auto；/*winphone8和android4+*/-webkit-overflow-scrolling:touch;/*ios5+*/如何使用上面的代码：
.scrollContainer{宽度：100px；高度：50px；-webkit-overflow-scrolling：触摸；溢出-y：自动；溢出-x：隐藏；}.scrollContainer>ul>li{高度：20px；width:100%;}可能会出现bug父元素scrollContainer加上定位position:absolute|relative，滑动几次后，滚动区域会卡住。如果不能快速滑动，页面会一片空白，滑动停止后才会显示内容。这时候应该在父元素scrollContainer中加入如下代码：//解决第一个bugz-index:1;//解决第二个bug-webkit-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);需求在vue项目中，我们可能会遇到这样的需求，例如：在商品列表页，点击商品进入详情页，从详情页返回商品列表页。应显示的页面应与以前相同。也就是说，应该缓存滚动条的位置；创意和产品列表需要缓存。页面的缓存方法可以参考vue官方文档keep-alive对页面进行缓存，这样详情页返回时不会重新加载页面。在激活的商品列表生命周期中，监听当前scrollContainer的父元素的滚动事件。在滚动回调中，获取scrollTop的值（滚动条到滚动元素的距离，即scrollContainer），在当前滚动事件的deactivatedListener中存入和移除。在商品列表中，点击进入详情页时，会缓存滚动条的位置，可以放在sessionStorage|localStorage中。当然，如果你使用vuex，你可以直接把值放到vuex中进行管理；当你从详情页返回时，你需要同时做这件事，将你保存在缓存中的scrollTop值重新赋值给当前div的滚动好吧，思路是这样的，你就是完毕。vue中的具体实现是使用vuex来管理滚动条的位置。实现代码如下：
//添加一个ref获取当前dom computed:{...mapGetters(["h??ome_list_top"//vuex中存储的滚动条的位置])}...方法：{recordScrollPosition(e){this.$store.dispatch("setHomeListTop",e.target.scrollTop);//实时保存到vuex中}}...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的页面跳转时，去除滚动事件this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition);//清除绑定的scroll事件}如果有更好的方法互相交流
