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

資訊專欄INFORMATION COLUMN

ios局部滾動(dòng)的bug所引發(fā)的思考

jindong / 2829人閱讀

流暢的不要不要的ios出來(lái)的bug讓人咬牙切齒。
bug產(chǎn)生的環(huán)境：局部滾動(dòng)，外部并沒(méi)有禁止默認(rèn)瀏覽器事件
bug：導(dǎo)致局部滑動(dòng)不流暢嚴(yán)重情況下不能滑動(dòng)
解決方案:
1:js禁止外部的瀏覽器默認(rèn)事件，停止局部事件冒泡（對(duì)于結(jié)構(gòu)簡(jiǎn)單的頁(yè)面來(lái)說(shuō)可能適合）
2:-webkit-overflow-scrolling:touch給body和局部滾動(dòng)的元素

-webkit-overflow-scrolling:touch 創(chuàng)建了帶有硬件加速的系統(tǒng)級(jí)控件

但是呢，通過(guò)從網(wǎng)上的查看這個(gè)可能帶來(lái)其他的bug，用js設(shè)置局部滾動(dòng)的scrollTop的時(shí)候會(huì)出現(xiàn)空白，解決方案：

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

說(shuō)到這里，貼上一些可以解決一些問(wèn)題的css3的代碼吧

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

還有fixed的bug，這個(gè)在布局上可以調(diào)整，規(guī)定body,html為100%*100%，position為relative；然后用一個(gè)div包括內(nèi)容并設(shè)置position為absolute，overflow-y為auto，將要fixed的元素放到這個(gè)div外面設(shè)置position為absolute，這樣就可以模擬了，但是這里在ios又會(huì)出現(xiàn)局部滾動(dòng)問(wèn)題，所以回去一開(kāi)始的解決辦法，總結(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;
}

公眾號(hào)

我們的主頁(yè)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/111715.html

相關(guān)文章

  • ios局部滾動(dòng)的bug所引發(fā)的思考

    流暢的不要不要的ios出來(lái)的bug讓人咬牙切齒。bug產(chǎn)生的環(huán)境：局部滾動(dòng)，外部并沒(méi)有禁止默認(rèn)瀏覽器事件bug：導(dǎo)致局部滑動(dòng)不流暢嚴(yán)重情況下不能滑動(dòng)解決方案: 1:js禁止外部的瀏覽器默認(rèn)事件，停止局部事件冒泡（對(duì)于結(jié)構(gòu)簡(jiǎn)單的頁(yè)面來(lái)說(shuō)可能適合） 2:-webkit-overflow-scrolling:touch給body和局部滾動(dòng)的元素 -webkit-overflow-scrolling...

    ymyang 評(píng)論0 收藏0

  • 一個(gè)關(guān)于對(duì)象引用的bug引發(fā)的對(duì)于引用類型及數(shù)組的簡(jiǎn)單思考

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

    lijinke666 評(píng)論0 收藏0

  • ios局部滾動(dòng)的坑及解決方案

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

    yhaolpz 評(píng)論0 收藏0

  • 我是如何通過(guò)debug成功甩鍋瀏覽器的：解決fixed定位元素，在頁(yè)面滾動(dòng)后touch事件失效問(wèn)題

    摘要：二分析排查一步驟一使用搜索引擎我是在無(wú)意中發(fā)現(xiàn)該問(wèn)題的，當(dāng)時(shí)觀察到的現(xiàn)象是綁定在上的事件有時(shí)會(huì)被觸發(fā)，有時(shí)會(huì)失效。這說(shuō)明并不存在偶爾失效的問(wèn)題。也就是說(shuō)，我需要找到確切的令響應(yīng)事件失效的原因。接下來(lái)的事很簡(jiǎn)單，繼續(xù)搜索事件在頁(yè)面滾動(dòng)后失效。 如果你關(guān)注我應(yīng)該知道，我最近對(duì)PC端頁(yè)面進(jìn)行移動(dòng)適配。在這個(gè)過(guò)程中，為了節(jié)省用戶300ms的時(shí)間，同時(shí)給予用戶更及時(shí)的點(diǎn)擊反饋（這意味著更好的用戶...

    tulayang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<