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

資訊專欄INFORMATION COLUMN

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

馬忠志 / 2169人閱讀

摘要：使用方法就是把容器元素對象或者選擇器作為參數調用如果有情況的出現，需要再傳一個，即上面有的和地址，上去給個唄各位看官

開始

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

什么是黑邊

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

什么情況下會出現黑邊

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

情況分析

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

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

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

第三種情況是第二種情況的特殊情況，就是當列表不是靜態的，而是動態加載的時候，某些操作，比如在列表加載之前滑動，或者是加載完之后默認的scrollTop為0還繼續向上滑動時，可能就會出現黑邊

解決方案

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

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

對于情況3，其實就是要在動態列表插入之后能夠，能夠將scrollTop改成1，這邊我用了MutationObserver方案，代碼如下：

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

wScrollFix

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51513.html

相關文章

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

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

    paraller 評論0 收藏0

  • 簡單一招搞定 three.js 屏幕適配

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

    騫諱護 評論0 收藏0

  • SegmentFault 技術周刊 Vol.35 - WebGL：打開網頁看大片

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

    objc94 評論0 收藏0

  • 微信中H5同層Video播放器接入教程

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

    PrototypeZ 評論0 收藏0

發表評論

0條評論

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