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

資訊專欄INFORMATION COLUMN

React禁止頁面滾動踩坑實踐與方案梳理

zhjx922 / 1722人閱讀

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

最近在使用 React 技術棧重構一個單頁應用，其中有個頁面是實現城市選擇功能，主要是根據城市的首字母來快速跳轉到相應位置，比較類似原生 APP 中的電話聯系人查找功能，頁面如圖

主要問題

在上下滑動右側 fixed 定位的元素時，頁面會跟著一起滑動

當然這個現象在開發過程中應該會經常遇到，比如彈起 modal 框時，如果 modal框的內容高度小于框高度，滑動內容也會導致頁面跟著滑動， 那么在 React 中像往常一樣處理

使用 React 提供的事件綁定機制，分別綁定三個 handler ，在 onTouchMove 事件中，我希望通過 preventDefault 能夠阻止父級元素的滾動

sidebarTouchMove(e) {
  e.preventDefault();
  ...
}

但實際的反饋卻事與愿違，在調試中，我發現 Chrome 是有警告的，并且沒有達到想要的效果

根據警告提示，找到的原因是

AddEventListenerOptions defaults passive to false. With this change touchstart and touchmove listeners added to the document will default to passive:true (so that calls to preventDefault will be ignored)..
 If the value is explicitly provided in the AddEventListenerOptions it will continue having the value specified by the page.
 This is behind a flag starting in Chrome 54, and enabled by default in Chrome 56. See https://developers.google.com...

來源: https://www.chromestatus.com/...

根據 chrome 的提示得知，是因為 Chrome 現在默認把通過在 document 上綁定的事件監聽器 passive 屬性（后面細說）默認置為 true，這樣就會導致我設置的 e.preventDefault() 被忽視了。當然 Chrome 的這個做法是有道理，是為了提高頁面滾動的性能，那么為了防止帶來的副作用，官方考慮的很周到，給我們提供了一個 CSS 屬性專門用來解決這個問題

#fixed-div {
  touch-action: none;
}
In rare cases this change can result in unintended scrolling. This is usually easily addressed by applying a?touch-action: nonestyle to the element where scrolling shouldn"t occur.

https://developer.mozilla.org...

加上了這個屬性，感覺世界總算和平了，But！在 ios 系統上測試發現，這個屬性 x 用沒有，查了下 Can I Use

確定無誤，就是不支持，所以這個屬性只在 Chrome 安卓等機型下是支持的，ios 這個就用不了，理想很豐滿，顯示很骨感。既然不兼容，那只能降級處理了，為了保證良好的功能體驗，感覺是還要從 passive 上做處理，說到 passive 根據 MDN文檔：addEventListener 的介紹，為了提高頁面滾動性能，大多瀏覽器都默認把 touchstart 和 touchmove 在文檔元素上直接注冊的這個事件監聽器屬性設置成 passive：true ，而通過 AddEventListener 注冊的事件依然沒有變化

既然現在默認將事件 passive 的屬性默認設置為 true ,那我就顯式設置為 false 好了，查遍 React 的文檔，也沒發現事件監聽器可以支持配置這個屬性的，在 github 上發現這個帖子 Support Passive Event Listeners #6436 目前看依然是 open 狀態的，現在不確定有沒有支持這個屬性

解決方案

既然這樣，只能多帶帶對 touchmove 通過 AddEventListener 方法去注冊事件監聽了

// 為元素添加事件監聽   
document.getElementById("nonius").addEventListener("touchmove", (e) => {
  // 執行滾動回調
  this.sidebarTouchMove(e)
}, {
  passive: false //  禁止 passive 效果
})

加上這個方法后，this.sidebarTouchMove(e) 方法中的 e.preventDefault() 方法就可以正常使用了，而且沒有警告提示，問題到此就算解決了

總結

總結下，這里的坑主要是 chrome 和 safari 平臺的標準不統一導致的，新的標準出臺，其它宿主環境不能很好的支持，當然 react 官方對這個屬性的支持也比較慢，同樣的前端 UI 框架 Vue 就處理的很棒

不小心暴露了，我是個 Vue粉，233
ok，完 ~

巴拉巴拉傳送門 -> 原文鏈接

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

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

相關文章

  • React 歷史項目維護與優化實踐

    摘要：本文介紹了作者接手維護一個中型歷史項目時的一系列改進實踐，包括模塊結構拆分業務邏輯梳理打包優化等。代碼中如菜單名稱結構表單字段名等的各種硬編碼配置分散在各處。最后，在提升面向開發者的打包體驗方面，本次優化中主要實現的是與的解耦。 本文介紹了作者接手維護一個中型 React 歷史項目時的一系列改進實踐，包括模塊結構拆分、業務邏輯梳理、Webpack 打包優化等。 背景 這是一個 PC 的...

    toddmark 評論0 收藏0

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

發表評論

0條評論

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