摘要：最近在使用技術(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 中的電話聯(lián)系人查找功能，頁面如圖

在上下滑動(dòng)右側(cè) fixed 定位的元素時(shí)，頁面會(huì)跟著一起滑動(dòng)

當(dāng)然這個(gè)現(xiàn)象在開發(fā)過程中應(yīng)該會(huì)經(jīng)常遇到，比如彈起 modal 框時(shí)，如果 modal框的內(nèi)容高度小于框高度，滑動(dòng)內(nèi)容也會(huì)導(dǎo)致頁面跟著滑動(dòng)， 那么在 React 中像往常一樣處理

使用 React 提供的事件綁定機(jī)制，分別綁定三個(gè) handler ，在 onTouchMove 事件中，我希望通過 preventDefault 能夠阻止父級(jí)元素的滾動(dòng)

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

但實(shí)際的反饋卻事與愿違，在調(diào)試中，我發(fā)現(xiàn) Chrome 是有警告的，并且沒有達(dá)到想要的效果

根據(jù)警告提示，找到的原因是

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/...

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

#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...

加上了這個(gè)屬性，感覺世界總算和平了，But！在 ios 系統(tǒng)上測(cè)試發(fā)現(xiàn)，這個(gè)屬性 x 用沒有，查了下 Can I Use

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

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

既然這樣，只能多帶帶對(duì) touchmove 通過 AddEventListener 方法去注冊(cè)事件監(jiān)聽了

// 為元素添加事件監(jiān)聽   
document.getElementById("nonius").addEventListener("touchmove", (e) => {
  // 執(zhí)行滾動(dòng)回調(diào)
  this.sidebarTouchMove(e)
}, {
  passive: false //  禁止 passive 效果
})

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

總結(jié)下，這里的坑主要是 chrome 和 safari 平臺(tái)的標(biāo)準(zhǔn)不統(tǒng)一導(dǎo)致的，新的標(biāo)準(zhǔn)出臺(tái)，其它宿主環(huán)境不能很好的支持，當(dāng)然 react 官方對(duì)這個(gè)屬性的支持也比較慢，同樣的前端 UI 框架 Vue 就處理的很棒

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

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