ios局部滾動的bug所引發的思考

ymyang 發布于2019-08-01 15:57 / 883人閱讀

流暢的不要不要的ios出來的bug讓人咬牙切齒。
bug產生的環境：局部滾動，外部并沒有禁止默認瀏覽器事件
bug：導致局部滑動不流暢嚴重情況下不能滑動
解決方案:
1:js禁止外部的瀏覽器默認事件，停止局部事件冒泡（對于結構簡單的頁面來說可能適合）
2:-webkit-overflow-scrolling:touch給body和局部滾動的元素

-webkit-overflow-scrolling:touch 創建了帶有硬件加速的系統級控件

但是呢，通過從網上的查看這個可能帶來其他的bug，用js設置局部滾動的scrollTop的時候會出現空白，解決方案：

el.WebKitOverflowScrolling = "auto";
el.scrollTop = 500;
el.WebKitOverflowScrolling = "touch";

說到這里，貼上一些可以解決一些問題的css3的代碼吧

*{
webkit-tap-highlight-color:rgba(0,0,0,0);//去掉點擊高亮
-webkit-appearance: none;//消除輸入框和按鈕的原生外觀
-webkit-user-select: none; //禁止頁面文字選擇，此屬性不繼承，一般加在body上規定整個body的文字都不會自動調整
-webkit-text-size-adjust: none; //禁止文字自動調整大小
-webkit-touch-callout:none; // 禁用長按頁面時的彈出菜單(iOS下有效) ,img和a標簽都要加
pointer-events: none;//禁止長按圖片
}

還有fixed的bug，這個在布局上可以調整，規定body,html為100%*100%，position為relative；然后用一個div包括內容并設置position為absolute，overflow-y為auto，將要fixed的元素放到這個div外面設置position為absolute，這樣就可以模擬了，但是這里在ios又會出現局部滾動問題，所以回去一開始的解決辦法，總結為代碼：

html,body {
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    -webkit-overflow-scrolling:touch
}
.content {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:auto;
    overflow:auto;
    -webkit-overflow-scrolling:touch
}
.fixed-div {
    position:absolute;
    right:0;
    bottom:0;
}

公眾號

我們的主頁

云服務器 GPU云服務器人工智能的思考對人工智能的思考點所對應的數據機房租賃所需要具備的要求

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

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

ios局部滾動的bug所引發的思考

流暢的不要不要的ios出來的bug讓人咬牙切齒。bug產生的環境：局部滾動，外部并沒有禁止默認瀏覽器事件bug：導致局部滑動不流暢嚴重情況下不能滑動解決方案: 1:js禁止外部的瀏覽器默認事件，停止局部事件冒泡（對于結構簡單的頁面來說可能適合） 2:-webkit-overflow-scrolling:touch給body和局部滾動的元素 -webkit-overflow-scrolling...

jindong 2019-08-29 11:32 評論0 收藏0
一個關于對象引用的bug引發的對于引用類型及數組的簡單思考

摘要：圖示如下而對于引用類型的復制可不是這樣這個復制只是將的引用賦值給，二者是屬于同一個引用，訪問的都是堆內存中的同一個對象，任何一個該引用的變量發生變化，會對其余使用該引用的變量也發生變化。這兩天自己在寫代碼的時候，出現一個BUG，代碼如下： class Car { constructor(carId) { this.position =...

lijinke666 2019-08-21 18:32 評論0 收藏0
ios局部滾動的坑及解決方案

摘要：起因最近幾天在寫一個滾動加載更多數據的插件，為局部滾動寫時，遇到了很多局部滾動的坑，在這里分享一下這些坑的解決方案。約定把產生滾動條的元素稱之為視窗全局滾動滾動條在或者父級元素上。坑一瀏覽器局部滾動默認沒有彈性滾動的效果。起因最近幾天在寫一個滾動加載更多數據的插件(Scrollload)，為局部滾動寫demo時，遇到了很多局部滾動的坑，在這里分享一下這些坑的解決方案。以下的坑只針對...

yhaolpz 2019-08-20 13:41 評論0 收藏0
我是如何通過debug成功甩鍋瀏覽器的：解決fixed定位元素，在頁面滾動后touch事件失效問題

摘要：二分析排查一步驟一使用搜索引擎我是在無意中發現該問題的，當時觀察到的現象是綁定在上的事件有時會被觸發，有時會失效。這說明并不存在偶爾失效的問題。也就是說，我需要找到確切的令響應事件失效的原因。接下來的事很簡單，繼續搜索事件在頁面滾動后失效。如果你關注我應該知道，我最近對PC端頁面進行移動適配。在這個過程中，為了節省用戶300ms的時間，同時給予用戶更及時的點擊反饋（這意味著更好的用戶...

tulayang 2019-08-30 14:02 評論0 收藏0