vue控制滚动条滑到某个位置(vue 滚动条往下滑)

发布时间：2024-01-06

vue控制滚动条滑到某个位置一.关于web开发的各种高度的计算介绍

推荐整理分享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' }) vue控制滚动条滑到某个位置(vue 滚动条往下滑)

配个官方图理解：

二.回到页面顶部实现方法 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

本文链接地址:https://www.jiuchutong.com/zhishi/288104.html 转载请保留说明！

上一篇：海带软件分享——Office 2021全家桶安装教程（附报错解决方法）(海带下载)

下一篇：欧罗巴山国家公园中的Naranjo de Bulnes峰，西班牙阿斯图里亚斯 (© Anton Petrus/Getty Images)(欧罗巴山国家公园旅游攻略)