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 相关文章推荐
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
js生成word中图片处理方法
Jan 06 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
vue addRoutes路由动态加载操作
Aug 04 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
Laravel实现短信注册的示例代码
2018/05/29 PHP
javascript 函数使用说明
2010/04/07 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
原生js生成图片验证码
2020/10/11 Javascript
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python+opencv实现阈值分割
2018/12/26 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
安全检查验收制度
2014/01/12 职场文书
规划编制实施方案
2014/03/15 职场文书
建筑工地标语
2014/06/18 职场文书
2014年管理工作总结
2014/11/22 职场文书
上班迟到检讨书
2015/05/06 职场文书
公司车队管理制度
2015/08/04 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
一文搞懂Redis中String数据类型
2022/04/03 Redis
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS