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

資訊專欄INFORMATION COLUMN

React中禁止頁面滾動

suosuopuo / 2061人閱讀

摘要:最近用做了一個端的頁面,主要實(shí)現(xiàn)了一個彈層滑動選擇的功能,效果如圖遇到了一個問題,當(dāng)在底部彈出層進(jìn)行滾動選擇城市區(qū)劃時,蒙版后的頁面也會隨著滾動。所以為了讓頁面滾動的效果如絲般順滑,從開始,在和上注冊的和事件處理函數(shù),會默認(rèn)為設(shè)置。

最近用react做了一個H5端的頁面,主要實(shí)現(xiàn)了一個彈層滑動選擇的功能,效果如圖:

遇到了一個問題,當(dāng)在底部彈出層進(jìn)行滾動選擇城市區(qū)劃時,蒙版后的頁面也會隨著滾動。

這種現(xiàn)象在開發(fā)過程中經(jīng)常會遇到,常規(guī)思路就是使用event.preventDefault阻止父級元素的滾動:

{this.renderItems()}

滾動事件代碼片段

handleTouchMove = (event) => {
    event.preventDefault();
    ...
};

但這波操作過后,卻未能如愿以償,在調(diào)試的時候Chrome的告警,如冷冷的冰雨打在我的臉上:

根據(jù)告警關(guān)鍵字用Google百度了一番,等到了如下結(jié)論:

由于瀏覽器必須要在執(zhí)行事件處理函數(shù)之后,才能知道有沒有調(diào)用 preventDefault() ,這就導(dǎo)致了瀏覽器不能及時響應(yīng)滾動,略有延遲。

所以為了讓頁面滾動的效果如絲般順滑,從 chrome56 開始,在 window、document 和 body 上注冊的 touchstarttouchmove 事件處理函數(shù),會默認(rèn)為設(shè)置passive: true。瀏覽器忽略 preventDefault() 就可以第一時間滾動了。


細(xì)細(xì)揣測一番,其實(shí)官方的考慮還是有道理的,也是周到的。在CSS中提供了一個屬性touch-action,用于指定某個給定的區(qū)域是否允許用戶操作,以及如何響應(yīng)用戶操作。

據(jù)此,我的解決方案就是設(shè)置這個CSS屬性:

touch-action: none;

感覺總算萬事大吉利了,那個手機(jī)試一把,用iPhone的Safari瀏覽器代開后,依然并沒有什么卵用。是的,九成是瀏覽器兼容問題,查看CanIUse,果不其然。

那么既然如此,剩下的解決方案,就只有在綁定事件的時候顯式的設(shè)置{ passive: false },查了一圈React文檔也沒發(fā)現(xiàn),可以支持配置這個屬性的方法。此處真心感嘆一句不如Vue方便,如果是Vue就可以這么寫:

既然如此,就只能用原生的事件綁定了

document.getElementById("picker").addEventListener("touchmove", this.handleTouchMove, { passive: false });

終于,世界和平了。

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

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

相關(guān)文章

  • React禁止頁面滾動

    摘要:最近用做了一個端的頁面,主要實(shí)現(xiàn)了一個彈層滑動選擇的功能,效果如圖遇到了一個問題,當(dāng)在底部彈出層進(jìn)行滾動選擇城市區(qū)劃時,蒙版后的頁面也會隨著滾動。所以為了讓頁面滾動的效果如絲般順滑,從開始,在和上注冊的和事件處理函數(shù),會默認(rèn)為設(shè)置。 最近用react做了一個H5端的頁面,主要實(shí)現(xiàn)了一個彈層滑動選擇的功能,效果如圖:showImg(https://segmentfault.com/img...

    Karrdy 評論0 收藏0
  • React禁止頁面滾動踩坑實(shí)踐與方案梳理

    摘要:最近在使用技術(shù)棧重構(gòu)一個單頁應(yīng)用,其中有個頁面是實(shí)現(xiàn)城市選擇功能,主要是根據(jù)城市的首字母來快速跳轉(zhuǎn)到相應(yīng)位置,比較類似原生中的電話聯(lián)系人查找功能,頁面如圖主要問題在上下滑動右側(cè)定位的元素時,頁面會跟著一起滑動當(dāng)然這個現(xiàn)象在開發(fā)過程中應(yīng)該會經(jīng) 最近在使用 React 技術(shù)棧重構(gòu)一個單頁應(yīng)用,其中有個頁面是實(shí)現(xiàn)城市選擇功能,主要是根據(jù)城市的首字母來快速跳轉(zhuǎn)到相應(yīng)位置,比較類似原生 APP ...

    zhjx922 評論0 收藏0
  • react 移動端 兼容性問題和一些小細(xì)節(jié)

    摘要:主要有兩種方式和。的私有標(biāo)簽,頂端狀態(tài)條的樣式。禁止數(shù)字自動識別為電話號碼,這個比較有用,因?yàn)橐淮當(dāng)?shù)字在上會顯示成藍(lán)色,樣式加成別的顏色也是不生效的。頁面禁止復(fù)制選中文本 react 移動端 兼容性問題和一些小細(xì)節(jié) 使用 ES6 的瀏覽器兼容性問題 react 對低版本的安卓webview 兼容性 iOS下 fixed與軟鍵盤的問題 onClick 阻止冒泡 meta對于移動端的一些...

    BingqiChen 評論0 收藏0
  • react 移動端 兼容性問題和一些小細(xì)節(jié)

    摘要:主要有兩種方式和。的私有標(biāo)簽,頂端狀態(tài)條的樣式。禁止數(shù)字自動識別為電話號碼,這個比較有用,因?yàn)橐淮當(dāng)?shù)字在上會顯示成藍(lán)色,樣式加成別的顏色也是不生效的。頁面禁止復(fù)制選中文本 react 移動端 兼容性問題和一些小細(xì)節(jié) 使用 ES6 的瀏覽器兼容性問題 react 對低版本的安卓webview 兼容性 iOS下 fixed與軟鍵盤的問題 onClick 阻止冒泡 meta對于移動端的一些...

    liaosilzu2007 評論0 收藏0

發(fā)表評論

0條評論

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