vue進入頁面時不在頂部,檢測滾動返回頂部按鈕問題及解決方法
這里是本小白使用時遇到的問題及個人使用的方法可能并不完美。
1.監(jiān)測瀏覽器滾動條滾動事件及滾動距離
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綁定監(jiān)測事件就能獲得window.pageYOffset滾動距離。
2.有些時候給body設置了{width:100%,height:100%}，之后就需要將事件綁定在document.body，才能獲得document.body.scrollTop滾動距離。
2.1PC端IE/edge有滾動事件但通過document.body.scrollTop獲取不到數(shù)值。
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進入頁面時不在頂部,檢測滾動返回頂部按鈕,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
今天小編就為大家分享一篇vue-element-admin 菜單標簽失效的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue 表單驗證按鈕事件交由父組件觸發(fā)的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要為大家詳細介紹了vue封裝圖片滑塊驗證組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue3+ts+elementui-plus二次封裝彈框實戰(zhàn)教程
這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框實戰(zhàn)教程,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
vue-pdf實現(xiàn)pdf在線預覽并實現(xiàn)自定義預覽框高度
這篇文章主要介紹了vue-pdf實現(xiàn)pdf在線預覽并實現(xiàn)自定義預覽框高度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
react+vite動態(tài)導入報錯@vite-ignore的問題及解決
這篇文章主要介紹了react+vite動態(tài)導入報錯@vite-ignore的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
基于Vue-Cli 打包自動生成/抽離相關配置文件的實現(xiàn)方法
基于Vue-cli 項目產(chǎn)品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，極大的降低了效率。這篇文章主要介紹了基于Vue-Cli 打包自動生成/抽離相關配置文件 ,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了Vue實現(xiàn)tab切換的兩種方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了JavaScript優(yōu)選七個用于vue開發(fā)庫，借助開源庫加速Vue項目的開發(fā)進度是現(xiàn)代前端開發(fā)比較常見的方式，平常收集一些JavaScript庫介紹，在遇到需要的時候可以信手拈來2023-02-02
在前端開發(fā)中我們常常需要將頁面頁面為word文件,這篇文章主要給大家介紹了關于vue前端實現(xiàn)導出頁面為word的兩種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04