最近在使用 React 技術(shù)棧重構(gòu)一個單頁應(yīng)用服猪，其中有個頁面是實現(xiàn)城市選擇功能近她，主要是根據(jù)城市的首字母來快速跳轉(zhuǎn)到相應(yīng)位置晌端，比較類似原生 APP 中的電話聯(lián)系人查找功能，頁面如圖
主要問題
在上下滑動右側(cè) fixed 定位的元素時演痒，頁面會跟著一起滑動
當然這個現(xiàn)象在開發(fā)過程中應(yīng)該會經(jīng)常遇到蹦锋，比如彈起 modal 框時千扔，如果 modal框的內(nèi)容高度小于框高度，滑動內(nèi)容也會導(dǎo)致頁面跟著滑動阅嘶， 那么在 React 中像往常一樣處理
<div className="nonius"
id="nonius"
onTouchStart={this.sidebarTouchStart.bind(this)}
onTouchMove={this.sidebarTouchMove.bind(this)}
onTouchEnd={this.sidebarTouchEnd.bind(this)}
>
使用 React 提供的事件綁定機制魂迄，分別綁定三個 handler 熊昌，在 onTouchMove 事件中昂利，我希望通過 preventDefault 能夠阻止父級元素的滾動
sidebarTouchMove(e) {
e.preventDefault();
...
}
但實際的反饋卻事與愿違扩所，在調(diào)試中买羞，我發(fā)現(xiàn) Chrome 是有警告的婉徘，并且沒有達到想要的效果
根據(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/web/updates/2017/01/scrolling-intervention
來源: https://www.chromestatus.com/features/5093566007214080
根據(jù) chrome 的提示得知，是因為 Chrome 現(xiàn)在默認把通過在 document 上綁定的事件監(jiān)聽器 passive 屬性（后面細說）默認置為 true，這樣就會導(dǎo)致我設(shè)置的 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/zh-CN/docs/Web/CSS/touch-action
加上了這個屬性俊嗽，感覺世界總算和平了，But！在 ios 系統(tǒng)上測試發(fā)現(xiàn)税迷，這個屬性 x 用沒有，查了下 Can I Use
確定無誤，就是不支持外永，所以這個屬性只在 Chrome 安卓等機型下是支持的，ios 這個就用不了政钟，理想很豐滿驮履，顯示很骨感。既然不兼容口四，那只能降級處理了顺又，為了保證良好的功能體驗，感覺是還要從 passive 上做處理，說到 passive 根據(jù) MDN文檔：addEventListener 的介紹返弹，為了提高頁面滾動性能去团，大多瀏覽器都默認把 touchstart 和 touchmove 在文檔元素上直接注冊的這個事件監(jiān)聽器屬性設(shè)置成 passive：true 土陪，而通過 AddEventListener 注冊的事件依然沒有變化
既然現(xiàn)在默認將事件 passive 的屬性默認設(shè)置為 true ,那我就顯式設(shè)置為 false 好了源哩，查遍 React 的文檔坛掠，也沒發(fā)現(xiàn)事件監(jiān)聽器可以支持配置這個屬性的，在 github 上發(fā)現(xiàn)這個帖子 Support Passive Event Listeners #6436 目前看依然是 open 狀態(tài)的，現(xiàn)在不確定有沒有支持這個屬性
解決方案
既然這樣撤缴，只能單獨對 touchmove 通過 AddEventListener 方法去注冊事件監(jiān)聽了
// 為元素添加事件監(jiān)聽
document.getElementById('nonius').addEventListener("touchmove", (e) => {
// 執(zhí)行滾動回調(diào)
this.sidebarTouchMove(e)
}, {
passive: false // 禁止 passive 效果
})
加上這個方法后微宝，this.sidebarTouchMove(e) 方法中的 e.preventDefault() 方法就可以正常使用了，而且沒有警告提示虎眨，問題到此就算解決了
總結(jié)
總結(jié)下蟋软，這里的坑主要是 chrome 和 safari 平臺的標準不統(tǒng)一導(dǎo)致的，新的標準出臺嗽桩，其它宿主環(huán)境不能很好的支持岳守，當然 react 官方對這個屬性的支持也比較慢，同樣的前端 UI 框架 Vue 就處理的很棒
不小心暴露了碌冶，我是個 Vue粉湿痢，233
ok，完 ~
原文地址： http://w3cay.com/post/dc49b55.html?title=React-scroll&from=jianshu
