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操作userdata
Apr 27 Javascript
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
php5.3 goto函数介绍和示例
2014/03/21 PHP
广告显示判断
2006/08/31 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
小程序实现多列选择器
2019/02/15 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
python实现电子词典
2020/04/23 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
C有"按引用传递"吗
2016/09/06 面试题
平面设计师工作职责范文
2013/12/03 职场文书
大学生创业感言
2014/01/25 职场文书
婚假请假条怎么写
2014/04/10 职场文书
软件项目实施计划书
2014/05/02 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
公司给客户的感谢信
2015/01/23 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js