這篇文章主要介紹了如何解決微信瀏覽器下拉黑邊的問題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括西吉網(wǎng)站建設(shè)、西吉網(wǎng)站制作、西吉網(wǎng)頁制作以及西吉網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，西吉網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到西吉省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

開始

由于在開發(fā)微信頁面的時(shí)候下拉黑邊的情況很常見，有時(shí)候會(huì)比較影響體驗(yàn)，因此開發(fā)了wScrollFix庫，用于隱藏微信下拉的黑邊問題

npm地址
github地址

什么是黑邊

相信很多在微信上面做網(wǎng)頁開發(fā)的同學(xué)都會(huì)發(fā)現(xiàn)，當(dāng)頁面被劃到頂部或者底部的時(shí)候，如果繼續(xù)滑動(dòng)，頁面會(huì)被整個(gè)進(jìn)行下滑，露出上面或者下面的黑底，黑底上面標(biāo)明了當(dāng)前訪問頁面的域名信息，黑邊的作用也很明顯，由于在微信內(nèi)瀏覽器并沒有像傳統(tǒng)瀏覽器地址欄那樣子的設(shè)計(jì)，為了在一定程度上面防止釣魚網(wǎng)站，所以通過下拉顯示域名信息，如下圖

什么情況下會(huì)出現(xiàn)黑邊

現(xiàn)象就像上面所說的，如果到了元素的滾動(dòng)邊緣，即元素的scrollTop為0之后繼續(xù)下滑，或者是到滾動(dòng)到底部的時(shí)候，繼續(xù)操作就會(huì)出現(xiàn)以上的黑邊情況。

情況分析

上面我們分析了在微信瀏覽器中出現(xiàn)黑邊的情況，接下去我們聊一聊如何解決，
根據(jù)以上的思路，可以分為以下幾種情況去解決

對(duì)于不需要滾動(dòng)的頁面，我們可以直接將body元素的 touch事件直接preventDefault掉，這樣子頁面根元素就不會(huì)對(duì)頁面有滾動(dòng)事件的響應(yīng)了

第二種情況是頁面中有滾動(dòng)的元素，那么應(yīng)用于情況1的解決方法就不能用了，用了之后會(huì)使得整個(gè)頁面的滾動(dòng)失效，因此只能另辟蹊徑，回想下我們剛才的黑邊的出現(xiàn)情況，在scrollTop為0的時(shí)候，繼續(xù)操作會(huì)使得瀏覽器出現(xiàn)黑邊，因此我們可以讓滾動(dòng)的頂部不要到達(dá)scrollTop <= 0，還有底部不要到達(dá)，這樣子上劃下劃到極限都不會(huì)出現(xiàn)黑邊了

第三種情況是第二種情況的特殊情況，就是當(dāng)列表不是靜態(tài)的，而是動(dòng)態(tài)加載的時(shí)候，某些操作，比如在列表加載之前滑動(dòng)，或者是加載完之后默認(rèn)的scrollTop為0還繼續(xù)向上滑動(dòng)時(shí)，可能就會(huì)出現(xiàn)黑邊

解決方案

對(duì)于我封裝的wScrollFix庫，主要解決的是上面說的情況2和情況3，情況1直接按照上面的做法對(duì)touch事件進(jìn)行綁定就行了
下面我說下解決情況2的方法：代碼如下

可以看到這個(gè)方法接受一個(gè)參數(shù)，用于將獲取滾動(dòng)的容器元素，首先將scrollTop設(shè)置成1，然后在touchstart,scroll,touchmove事件對(duì)頁面元素滾動(dòng)進(jìn)行檢測(cè)，確保scrollTop在1和底部高度減1之間，這樣子就不會(huì)出現(xiàn)黑邊

對(duì)于情況3，其實(shí)就是要在動(dòng)態(tài)列表插入之后能夠，能夠?qū)crollTop改成1，這邊我用了MutationObserver方案，代碼如下：

代碼使用了防抖防止插入多次頻繁回調(diào)，回調(diào)的部分的邏輯也比較簡單，就是將scrollTop變成1

wScrollFix

封裝的wScrollFix使用很簡單，可以通過npm i wscrollfix直接進(jìn)行模塊引入，也可以在github直接進(jìn)行下載引入./dist/wScrollFix.js, 會(huì)向全局暴露wScrollFix方法。

使用方法就是把容器元素對(duì)象或者選擇器作為參數(shù)調(diào)用wScrollFix,如果有情況3的出現(xiàn)，需要再傳一個(gè)true，即 wScrollFix(el,true)

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何解決微信瀏覽器下拉黑邊的問題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱：如何解決微信瀏覽器下拉黑邊的問題-創(chuàng)新互聯(lián)
當(dāng)前URL：http://www.chinadenli.net/article26/dcsccg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、Google、企業(yè)建站、網(wǎng)站維護(hù)、動(dòng)態(tài)網(wǎng)站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)