React中禁止頁面滾動

Karrdy 發布于2019-08-23 16:12 / 2946人閱讀

摘要：最近用做了一個端的頁面，主要實現了一個彈層滑動選擇的功能，效果如圖遇到了一個問題，當在底部彈出層進行滾動選擇城市區劃時，蒙版后的頁面也會隨著滾動。所以為了讓頁面滾動的效果如絲般順滑，從開始，在和上注冊的和事件處理函數，會默認為設置。

最近用react做了一個H5端的頁面，主要實現了一個彈層滑動選擇的功能，效果如圖：

遇到了一個問題，當在底部彈出層進行滾動選擇城市區劃時，蒙版后的頁面也會隨著滾動。

這種現象在開發過程中經常會遇到，常規思路就是使用event.preventDefault阻止父級元素的滾動：


    
        {this.renderItems()}

滾動事件代碼片段

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

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

根據告警關鍵字用Google百度了一番，等到了如下結論：

由于瀏覽器必須要在執行事件處理函數之后，才能知道有沒有調用 preventDefault() ，這就導致了瀏覽器不能及時響應滾動，略有延遲。

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

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

據此，我的解決方案就是設置這個CSS屬性：

touch-action: none;

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

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

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

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

終于，世界和平了。

GPU云服務器云服務器禁止滾動 js彈框禁止滾動頁面滾動頁面滾動方向

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

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

React中禁止頁面滾動

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

suosuopuo 2019-08-30 15:56 評論0 收藏0
React禁止頁面滾動踩坑實踐與方案梳理

摘要：最近在使用技術棧重構一個單頁應用，其中有個頁面是實現城市選擇功能，主要是根據城市的首字母來快速跳轉到相應位置，比較類似原生中的電話聯系人查找功能，頁面如圖主要問題在上下滑動右側定位的元素時，頁面會跟著一起滑動當然這個現象在開發過程中應該會經最近在使用 React 技術棧重構一個單頁應用，其中有個頁面是實現城市選擇功能，主要是根據城市的首字母來快速跳轉到相應位置，比較類似原生 APP ...

zhjx922 2019-08-22 18:29 評論0 收藏0
react 移動端兼容性問題和一些小細節

摘要：主要有兩種方式和。的私有標簽，頂端狀態條的樣式。禁止數字自動識別為電話號碼，這個比較有用，因為一串數字在上會顯示成藍色，樣式加成別的顏色也是不生效的。頁面禁止復制選中文本 react 移動端兼容性問題和一些小細節使用 ES6 的瀏覽器兼容性問題 react 對低版本的安卓webview 兼容性 iOS下 fixed與軟鍵盤的問題 onClick 阻止冒泡 meta對于移動端的一些...

BingqiChen 2019-08-26 13:25 評論0 收藏0
react 移動端兼容性問題和一些小細節

摘要：主要有兩種方式和。的私有標簽，頂端狀態條的樣式。禁止數字自動識別為電話號碼，這個比較有用，因為一串數字在上會顯示成藍色，樣式加成別的顏色也是不生效的。頁面禁止復制選中文本 react 移動端兼容性問題和一些小細節使用 ES6 的瀏覽器兼容性問題 react 對低版本的安卓webview 兼容性 iOS下 fixed與軟鍵盤的問題 onClick 阻止冒泡 meta對于移動端的一些...

liaosilzu2007 2019-08-26 13:24 評論0 收藏0