国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信瀏覽器下拉黑邊的終極解決方案---wScroollFix

paraller / 2558人閱讀

摘要:使用方法就是把容器元素對象或者選擇器作為參數(shù)調(diào)用如果有情況的出現(xiàn),需要再傳一個,即上面有的和地址,上去給個唄各位看官

開始

由于在開發(fā)微信頁面的時候下拉黑邊的情況很常見,有時候會比較影響體驗,因此開發(fā)了wScrollFix庫,用于隱藏微信下拉的黑邊問題
npm地址
github地址

什么是黑邊

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

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

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

情況分析

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

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

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

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

解決方案

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

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

對于情況3,其實就是要在動態(tài)列表插入之后能夠,能夠?qū)?b>scrollTop改成1,這邊我用了MutationObserver方案,代碼如下:

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

wScrollFix

封裝的wScrollFix使用很簡單,可以通過npm i wscrollfix直接進行模塊引入,也可以在github直接進行下載引入./dist/wScrollFix.js, 會向全局暴露wScrollFix方法。
使用方法就是把容器元素對象或者選擇器作為參數(shù)調(diào)用wScrollFix,如果有情況3的出現(xiàn),需要再傳一個true,即 wScrollFix(el,true)

上面有wScrollFix的github和npm地址,上去給個star唄各位看官~

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/89854.html

相關(guān)文章

  • 微信覽器下拉邊的終極解決方案---wScroollFix

    摘要:使用方法就是把容器元素對象或者選擇器作為參數(shù)調(diào)用如果有情況的出現(xiàn),需要再傳一個,即上面有的和地址,上去給個唄各位看官 開始 由于在開發(fā)微信頁面的時候下拉黑邊的情況很常見,有時候會比較影響體驗,因此開發(fā)了wScrollFix庫,用于隱藏微信下拉的黑邊問題npm地址github地址 什么是黑邊 相信很多在微信上面做網(wǎng)頁開發(fā)的同學(xué)都會發(fā)現(xiàn),當(dāng)頁面被劃到頂部或者底部的時候,如果繼續(xù)滑動,頁面會...

    馬忠志 評論0 收藏0
  • 簡單一招搞定 three.js 屏幕適配

    摘要:我們先規(guī)定好相機到平面的距離為,然后試試看能不能通過計算設(shè)置值,剛好讓平面填滿一個寬高比為的屏幕。最終代碼與效果計算相機的函數(shù)在相機前方距離想要看到最大正方形區(qū)域邊長為屏幕寬高比效果的完整代碼原文鏈接 這篇文章只討論 PerspectiveCamera 的適配方法 做過手機 H5 的同學(xué)可能會覺得屏幕適配挺麻煩。原因是設(shè)計師提供的設(shè)計稿尺寸比固定,但是前端開發(fā)者卻要適配不同大小、長寬比...

    騫諱護 評論0 收藏0
  • SegmentFault 技術(shù)周刊 Vol.35 - WebGL:打開網(wǎng)頁看大片

    摘要:在文末,我會附上一個可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字,但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一,它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...

    objc94 評論0 收藏0
  • 微信中H5同層Video播放器接入教程

    摘要:如果要在瀏覽器里測試,如何安裝新版本瀏覽器如何測試效果,確定進入了同層播放器安裝新的版本后,如果要測試效果,請殺掉微信進程,把系統(tǒng)時間往后調(diào)一天以上,再進入網(wǎng)頁進行視頻播放,如果微信的頂消失,進入了一個沉浸式的播放器,則是進了同層播放器。 微信中H5同層Video播放器接入教程 x5-video-player-type 啟用H5同層播放器 通過video屬性x5-video-playe...

    PrototypeZ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<