A. vue-scroller记录滚动位置的示例代码
问题描述:
列表页进入详情页，或者tab页切换，然后再返回列表页，希望能切换到之前滚动位置
解决问题思路:
切换到其他页面前记录位置，返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现.
还有一种更简单粗暴的方法，
vue-scroller.min.js源码中添加宽高不为零判断，实现方式见评论，是最近代码优化的时候发现的。
代码部分:
beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon
||
from.path
==
'/'){//当前页面刷新不需要切换位置
sessionStorage.askPositon
=
'';
next();
}else{
next(vm
=>
{
if(vm
&&
vm.$refs.scrollerBottom){//通过vm实例访问this
setTimeout(function
()
{
vm.$refs.scrollerBottom.scrollTo(0,
sessionStorage.askPositon,
false);
},0)//同步转异步操作
}
})
}
},
beforeRouteLeave(to,from,next){//记录离开时的位置
sessionStorage.askPositon
=
this.$refs.scrollerBottom
&&
this.$refs.scrollerBottom.getPosition()
&&
this.$refs.scrollerBottom.getPosition().top;
next()
},
需要注意的点:
1.熟悉vue-router和vue-scroller的api
2.beforeRouteEnter的时候，是无法通过this去访问vue实例的，需要借助于vm
3.setTimeout
0
的使用
等下周发版的时候，我贴上链接，可以体验下效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:详解使用vue-router进行页面切换时滚动条位置与滚动监听事件解决Vue页面固定滚动位置的处理办法vue实现某元素吸顶或固定位置显示（监听滚动事件）
B. 如何在JavaScript里防止事件函数的高频触发和调用
throttle节流阀技术可以防止事件函数（例如滚轮滚动）的回调函数被频繁调用。
节流阀函数的实现原理是：
节流函数每次执行时都会检查上次执行的时间，通过指定wait参数，来保证只有距离上次执行超过一定时间，才会真正执行内部包裹的回调函数。由此来避免一种重量级的函数（如重绘或者dom操作）被频繁调用而导致产生性能问题。
以underscore.js的实现为例
varscroller=document.getElementById('scroller_div');
//此时console.log最多每300毫秒打印一次，不管onscroll事件触发得多么频繁，都不会超过这个频率。
scroller.onscroll=_.throttle(function(){
console.log(scroller.scrollTop);
},300);
C. jquery mobiscroll插件怎样阻止冒泡
这个不是冒泡，这个是android的默认浏览器webbiew的bug，穿透浮层点击，只能在确定之前固定一个状态，确定后取消，现在这个bug没修复
D. 求上下浮动的图片在指定的区域内随浏览器上下滚动的js代码
关键代码：
main-left：左侧参照DIV；
main-right：要浮动的；
div.top-box：页面顶部的Fixed层；
$(document).ready(function(){
$(window).scroll(function(){
var
leftTop=$("#main-left").offset().top;
varrightTop=
$("#main-right").offset().top;
varscrollerTop=$(this).scrollTop()+
$("div.top-box").height();
if(scrollerTop>leftTop){
if
(scrollerTop+$("#main-right").height()<leftTop+
$("#main-left").height()){
if($("#main-right").css("position")!=
"fixed"){
$("#main-right").css({"position":"fixed",
"left":$("#main-right").offset().left+"px","top":$("div.top-box").height()+
"px"});
}
}else{
$("#main-right").css({"position":"fixed",
"left":$("#main-right").offset().left+"px","top":($("div.top-box").height()-
(scrollerTop+$("#main-right").height()-(leftTop+$("#main-left").height()))
)+"px"});
}
}else{
if($("#main-right").css("position")!=
"static"){
$("#main-right").css({"position":"static"});
}
}
});
});