位置: IT常识 - 正文
vue控制滚动条滑到某个位置(vue 滚动条往下滑)
编辑：rootadmin推荐整理分享vue控制滚动条滑到某个位置(vue 滚动条往下滑)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue 滚动条往下滑,vue 滚动条往下滑,vue 滚动,vue div 滚动条,vue div 滚动条,vue控制滚动条位置,vue 滚动,vue div 滚动条,内容如对您有帮助，希望把文章链接给更多的朋友！
设置当前滑动到的距离
语法一：window.scrollTop(x,y) 传俩个值 //x横坐标 y纵坐标
例：window.scrollTop(0，1000)
语法二：window.scrollTop(options) 传对象，对象里面放属性
window.scrollTo({ top:560, left:0, behavior: "smooth" });// top:纵坐标 left:横坐标
behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
// 获取html元素 let htmlDom = document.documentElement; // 获取页面高度加内边距 const deviceHeight = htmlDom.clientHeight; //获取当前滚动条的高度 const scrollHeight=htmlDom.scrollHeight； //获取页面高度加内边距加边框 const offsetHeight=htmlDom.offsetHeight; console.log("html--------",htmlDom.offsetHeight); console.log("deviceHeight",deviceHeight); console.log("scrollHeight",htmlDom.scrollHeight); //我的业务里面只用到了这个scrollHeight let keepHeight=htmlDom.scrollHeight-90; // 如果需要设置某个元素的样式等用ref进行一个绑定 这个例子ref绑定的就是list // this.$refs.list.style.height = htmlDom.scrollHeight +"px" window.scrollTo({ top: keepHeight, behavior: 'instant' })
配个官方图理解：
二.回到页面顶部实现方法 1. 元素中绑定ref <div ref="returnTop"></div>在需要回到顶部的地方加上此代码
this.$nextTick(() => { this.$refs.returnTop.scrollTop = 0 })2. 浏览器回到页面顶部 window.scrollTo(0,0)，页面滚动不用多介绍了，上面有。
一个小例子如下：
window.scrollTo( 0, 100 );// 设置滚动行为改为平滑的滚动window.scrollTo({ top: 1000, behavior: "smooth"});3.使用el-pagination实现翻页自动回到顶部定义$scrollTo方法挂载在vue全局
// main.jsVue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => { window.scrollTo({ top: x, left: y, behavior: type // 滚动行为：smooth平滑滚动，instant瞬间滚动，默认值auto，等同于instant })}// 使用方法this.$scrollTo()三.总计一下今天学到的新知识（1）watch监听属性变化函数监听属性的两种写法：
isHot:{// immediate:true, //初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时。 //deep:true, //开启深度监视，当属性是个对象时，如需监听对象的属性，需开启深度监视 handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}},//简写/* isHot(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue,this)} */watch监听函数实现compted函数相同功能
data:{firstName:'张',lastName:'三',fullName:'张-三'},watch:{firstName(val){ //监听函数可以实现异步方法setTimeout(()=>{console.log(this)this.fullName = val + '-' + this.lastName},1000);},lastName(val){this.fullName = this.firstName + '-' + val}} （2）computed和watch之间的区别：1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
但是computed进行计算某些值得时候，可以少写一个属性。例如：fullName
上一篇：海带软件分享——Office 2021全家桶安装教程（附报错解决方法）(海带下载)
下一篇：欧罗巴山国家公园中的Naranjo de Bulnes峰，西班牙阿斯图里亚斯 (© Anton Petrus/Getty Images)(欧罗巴山国家公园旅游攻略)
