vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法


Posted in Javascript onOctober 30, 2019

这里是本小白使用时遇到的问题及个人使用的方法可能并不完美。

1.监测浏览器滚动条滚动事件及滚动距离

dmounted() {  
   window.addEventListener("scroll", this.gundong);  
 },
 destroyed() {
   window.removeEventListener("scroll", this.gundong);
 },
 methods: {
  gundong() {   
   var dis = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
   if(dis > 120){
    this.flag = true
   }else{
    this.flag = false
   }
  },

一般给window绑定监测事件就能获得window.pageYOffset滚动距离。

2.有些时候给body设置了{width:100%,height:100%},之后就需要将事件绑定在document.body,才能获得document.body.scrollTop滚动距离。

       2.1PC端IE/edge有滚动事件但通过document.body.scrollTop获取不到数值。

       2.2移动端火狐浏览器这样设置没问题也能获取document.body.scrollTop,百度浏览器和华为手机自带的浏览器获取不到。以下有解决方法

vue进入页面时不在顶部

  可以在main.js中写入以下

router.afterEach((to, from) => {
 window.scrollTo(0,0);
});

 或者用vue-router中的,需要浏览器支持history.pushState

scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
  return savedPosition
 } else {
  return { x: 0, y: 0 }
 }
}

如果因为需要设置了body{width:100%,height:100%}以上就不适用了

我是将vue最外层的#app-container也设置了{width:100%;height:100%},如果需要隐藏滚动条这时的样式,其他浏览器隐藏样式

html,body,#app-container{ width: 100%; height: 100%; overflow: scroll;}

html::-webkit-scrollbar, body::-webkit-scrollbar,#app-container::-webkit-scrollbar{width:0px;height:0px;}

此时可以在#app-contianer上绑定滚动事件并检测滚动距离

<div id="app-container" @scroll="scrollEvent($event)">

scrollEvent(e) {
  var dis = e.srcElement.scrollTop;
  console.log(dis)    
  if (dis > 150) {
   this.flag = true;
  } else {
   this.flag = false;
  }
 }

返回顶部按钮

backTop() {
  this.$el.scrollTop = 0;   
}

进入页面在顶部

var vm = new Vue({
 router,
 store,
 render: h => h(App)
}).$mount("#app");

router.afterEach((to, from) => {
 vm.$el.scrollTop = 0;
});

这样在PC端和移动端那几个浏览器都能正常运作。

总结

以上所述是小编给大家介绍的vue进入页面时不在顶部,检测滚动返回顶部按钮,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
基于jquery实现图片放大功能
May 07 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
用vue写一个日历
Nov 02 Javascript
Vue中图片Src使用变量的方法
Oct 30 #Javascript
解决VUE双向绑定失效的问题
Oct 29 #Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 #Javascript
vue获取form表单的值示例
Oct 29 #Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 #Javascript
使用axios请求时,发送formData请求的示例
Oct 29 #Javascript
基于form-data请求格式详解
Oct 29 #Javascript
You might like
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
php实现快速排序法函数代码
2012/08/27 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
php实现登陆模块功能示例
2016/10/20 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
JS中的异常处理方法分享
2013/12/22 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
浅谈Python中的字符串
2020/06/10 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
DELPHI面试题研发笔试试卷
2015/11/08 面试题
查环查孕证明
2014/01/10 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python