本篇內(nèi)容主要講解“vue進入頁面時不在頂部以及檢測滾動返回頂部按鈕如何解決”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“vue進入頁面時不在頂部以及檢測滾動返回頂部按鈕如何解決”吧!
為平泉等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及平泉網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、平泉網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求,就會得到認可,從而選擇與我們長期合作。這樣,我們也可以走得更遠!
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設(shè)置了{width:100%,height:100%},
之后就需要將事件綁定在document.body
,才能獲得document.body.scrollTop
滾動距離。
2.1PC端IE/edge有滾動事件但通過document.body.scrollTop
獲取不到數(shù)值。
2.2移動端火狐瀏覽器這樣設(shè)置沒問題也能獲取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 } } }
如果因為需要設(shè)置了body{width:100%,height:100%}
以上就不適用了
我是將vue最外層的#app-container也設(shè)置了{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進入頁面時不在頂部以及檢測滾動返回頂部按鈕如何解決”有了更深的了解,不妨來實際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
網(wǎng)站標題:vue進入頁面時不在頂部以及檢測滾動返回頂部按鈕如何解決
標題網(wǎng)址:http://muchs.cn/article2/pieoic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計、標簽優(yōu)化、網(wǎng)站制作、動態(tài)網(wǎng)站、定制網(wǎng)站、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)