成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React中禁止頁面滾動(dòng)

suosuopuo / 2043人閱讀

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

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

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

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


    

        {this.renderItems()}

滾動(dòng)事件代碼片段

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

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

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

由于瀏覽器必須要在執(zhí)行事件處理函數(shù)之后，才能知道有沒有調(diào)用 preventDefault() ，這就導(dǎo)致了瀏覽器不能及時(shí)響應(yīng)滾動(dòng)，略有延遲。
所以為了讓頁面滾動(dòng)的效果如絲般順滑，從 chrome56 開始，在 window、document 和 body 上注冊(cè)的 touchstart 和 touchmove 事件處理函數(shù)，會(huì)默認(rèn)為設(shè)置passive: true。瀏覽器忽略 preventDefault() 就可以第一時(shí)間滾動(dòng)了。


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

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

touch-action: none;

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

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

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

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

終于，世界和平了。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117576.html

相關(guān)文章

  • React中禁止頁面滾動(dòng)

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

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

  • React禁止頁面滾動(dòng)踩坑實(shí)踐與方案梳理

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

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

  • react 移動(dòng)端 兼容性問題和一些小細(xì)節(jié)

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

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

  • react 移動(dòng)端 兼容性問題和一些小細(xì)節(jié)

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

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

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

0條評(píng)論

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