vue控制滾動條滑到某個位置的方法實例
更新時間：2022年12月08日 15:57:47 作者：付漸漸
當容器有滾動條時,有時需要將滾動條滑到某個位置,下面這篇文章主要給大家介紹了關(guān)于vue控制滾動條滑到某個位置的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
一.關(guān)于web開發(fā)的各種高度的計算介紹
設(shè)置當前滑動到的距離
語法一：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,表示滾動行為,支持參數(shù) smooth(平滑滾動),instant(瞬間滾動),默認值auto,實測效果等同于instant
// 獲取html元素
let htmlDom = document.documentElement;
// 獲取頁面高度加內(nèi)邊距
const deviceHeight = htmlDom.clientHeight;
//獲取當前滾動條的高度
const scrollHeight=htmlDom.scrollHeight；
//獲取頁面高度加內(nèi)邊距加邊框
const offsetHeight=htmlDom.offsetHeight;
console.log("html--------",htmlDom.offsetHeight);
console.log("deviceHeight",deviceHeight);
console.log("scrollHeight",htmlDom.scrollHeight);
//我的業(yè)務(wù)里面只用到了這個scrollHeight
let keepHeight=htmlDom.scrollHeight-90;
// 如果需要設(shè)置某個元素的樣式等用ref進行一個綁定 這個例子ref綁定的就是list
// this.$refs.list.style.height = htmlDom.scrollHeight +"px"
window.scrollTo({
top: keepHeight,
behavior: 'instant'
})配個官方圖理解：
二.回到頁面頂部實現(xiàn)方法
1. 元素中綁定ref
<div ref="returnTop"></div>
在需要回到頂部的地方加上此代碼
this.$nextTick(() => {
this.$refs.returnTop.scrollTop = 0
})2. 瀏覽器回到頁面頂部 window.scrollTo(0,0)，頁面滾動
不用多介紹了，上面有。
一個小例子如下：
window.scrollTo( 0, 100 );
// 設(shè)置滾動行為改為平滑的滾動
window.scrollTo({
top: 1000,
behavior: "smooth"
});3.使用el-pagination實現(xiàn)翻頁自動回到頂部
定義$scrollTo方法掛載在vue全局
// main.js
Vue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => {
window.scrollTo({
top: x,
left: y,
behavior: type // 滾動行為：smooth平滑滾動，instant瞬間滾動，默認值auto，等同于instant
})
}
// 使用方法
this.$scrollTo()三.總計一下今天學到的新知識
（1）watch監(jiān)聽屬性變化函數(shù)
監(jiān)聽屬性的兩種寫法：
isHot:{
// immediate:true, //初始化時讓handler調(diào)用一下
//handler什么時候調(diào)用？當isHot發(fā)生改變時。
//deep:true, //開啟深度監(jiān)視，當屬性是個對象時，如需監(jiān)聽對象的屬性，需開啟深度監(jiān)視
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
//簡寫
/* isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)
} */watch監(jiān)聽函數(shù)實現(xiàn)compted函數(shù)相同功能
data:{
firstName:'張',
lastName:'三',
fullName:'張-三'
},
watch:{
firstName(val){
//監(jiān)聽函數(shù)可以實現(xiàn)異步方法
setTimeout(()=>{
console.log(this)
this.fullName = val + '-' + this.lastName
},1000);
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
}（2）computed和watch之間的區(qū)別：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以進行異步操作。
但是computed進行計算某些值得時候，可以少寫一個屬性。例如：fullName
補充：vue平滑滾動到指定位置
需求：錨點導航問題，點擊導航跳到對應(yīng)的模塊，兩種方式
1.滾動盒子滾動到指定高度 scrollTo（offsetTop每個模塊頂部距離可滾動盒子的頂部偏移的像素值）
goAnthor (selector) {
const height = document.querySelector(selector).offsetTop
const container = document.querySelector('.scroll-wrap')
container.scrollTo({
top: height,
behavior: 'smooth'
})
},
2.滾動元素滾動到滾動盒子的最頂部 scrollIntoView
goAnthor(selector) {
document.querySelector(selector).scrollIntoView({
behavior: 'smooth'
})
},
總結(jié)
到此這篇關(guān)于vue控制滾動條滑到某個位置的文章就介紹到這了,更多相關(guān)vue控制滾動條滑到某位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了2023年最新的vue.js下載和安裝的3種方法,每種方法結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
Vue2?Element?description組件列合并詳解
在使用Vue的時候經(jīng)常會涉及到表格的列合并,下面這篇文章主要給大家介紹了給大家Vue2?Element?description組件列合并的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面添加水印功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue中如何刪除字符串中的空格符方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了vue項目webpack中配置src路徑別名及使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解vue express啟動數(shù)據(jù)服務(wù)
本篇文章主要介紹了vue express啟動數(shù)據(jù)服務(wù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue3 axios安裝及使用示例代碼,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-04-04
今天小編就為大家分享一篇關(guān)于vue-router實現(xiàn)嵌套路由的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要為大家介紹了代理模式在vue中的使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了vue + elementUI 表單嵌套驗證,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11