資訊專欄INFORMATION COLUMN
流暢的不要不要的ios出來的bug讓人咬牙切齒。
bug產(chǎn)生的環(huán)境：局部滾動，外部并沒有禁止默認瀏覽器事件
bug：導(dǎo)致局部滑動不流暢嚴重情況下不能滑動
解決方案:
1:js禁止外部的瀏覽器默認事件，停止局部事件冒泡（對于結(jié)構(gòu)簡單的頁面來說可能適合）
2:-webkit-overflow-scrolling:touch給body和局部滾動的元素
-webkit-overflow-scrolling:touch 創(chuàng)建了帶有硬件加速的系統(tǒng)級控件
但是呢，通過從網(wǎng)上的查看這個可能帶來其他的bug，用js設(shè)置局部滾動的scrollTop的時候會出現(xiàn)空白，解決方案：
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上規(guī)定整個body的文字都不會自動調(diào)整
-webkit-text-size-adjust: none; //禁止文字自動調(diào)整大小
-webkit-touch-callout:none; // 禁用長按頁面時的彈出菜單(iOS下有效) ,img和a標簽都要加
pointer-events: none;//禁止長按圖片
}
還有fixed的bug，這個在布局上可以調(diào)整，規(guī)定body,html為100%*100%，position為relative；然后用一個div包括內(nèi)容并設(shè)置position為absolute，overflow-y為auto，將要fixed的元素放到這個div外面設(shè)置position為absolute，這樣就可以模擬了，但是這里在ios又會出現(xiàn)局部滾動問題，所以回去一開始的解決辦法，總結(jié)為代碼：
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;
}
公眾號
我們的主頁
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50231.html
流暢的不要不要的ios出來的bug讓人咬牙切齒。bug產(chǎn)生的環(huán)境：局部滾動，外部并沒有禁止默認瀏覽器事件bug：導(dǎo)致局部滑動不流暢嚴重情況下不能滑動解決方案: 1:js禁止外部的瀏覽器默認事件，停止局部事件冒泡（對于結(jié)構(gòu)簡單的頁面來說可能適合） 2:-webkit-overflow-scrolling:touch給body和局部滾動的元素 -webkit-overflow-scrolling...
摘要：圖示如下而對于引用類型的復(fù)制可不是這樣這個復(fù)制只是將的引用賦值給，二者是屬于同一個引用，訪問的都是堆內(nèi)存中的同一個對象，任何一個該引用的變量發(fā)生變化，會對其余使用該引用的變量也發(fā)生變化。 這兩天自己在寫代碼的時候，出現(xiàn)一個BUG，代碼如下： class Car { constructor(carId) { this.position =...
摘要：起因最近幾天在寫一個滾動加載更多數(shù)據(jù)的插件，為局部滾動寫時，遇到了很多局部滾動的坑，在這里分享一下這些坑的解決方案。約定把產(chǎn)生滾動條的元素稱之為視窗全局滾動滾動條在或者父級元素上。坑一瀏覽器局部滾動默認沒有彈性滾動的效果。 起因 最近幾天在寫一個滾動加載更多數(shù)據(jù)的插件(Scrollload)，為局部滾動寫demo時，遇到了很多局部滾動的坑，在這里分享一下這些坑的解決方案。以下的坑只針對...
摘要：二分析排查一步驟一使用搜索引擎我是在無意中發(fā)現(xiàn)該問題的，當時觀察到的現(xiàn)象是綁定在上的事件有時會被觸發(fā)，有時會失效。這說明并不存在偶爾失效的問題。也就是說，我需要找到確切的令響應(yīng)事件失效的原因。接下來的事很簡單，繼續(xù)搜索事件在頁面滾動后失效。 如果你關(guān)注我應(yīng)該知道，我最近對PC端頁面進行移動適配。在這個過程中，為了節(jié)省用戶300ms的時間，同時給予用戶更及時的點擊反饋（這意味著更好的用戶...
閱讀 2818·2023-04-25 22:51
閱讀 2057·2021-10-11 10:58
閱讀 3316·2019-08-30 10:49
閱讀 1877·2019-08-29 17:09
閱讀 3141·2019-08-29 10:55
閱讀 847·2019-08-26 10:34
閱讀 3492·2019-08-23 17:54
閱讀 985·2019-08-23 16:06
