使用 pointer-events: none 禁止鼠標事件
大部分人可能都不認識這個屬性，嗯，那麼它是幹什麼用的呢？
pointer-events 是一個 CSS 屬性，可以有多個不同的值，屬性的一部分值僅僅與 SVG 有關聯，這裏我們只關注 pointer-events: none 的情況，大概的意思就是禁止鼠標行爲，應用了該屬性後，譬如鼠標點擊，hover 等功能都將失效，即是元素不會成爲鼠標事件的 target。
可以就近 F12 打開開發者工具面板，給 <body> 標籤添加上 pointer-events: none 樣式，然後在頁面上感受下效果，發現所有鼠標事件都被禁止了。
那麼它有什麼用呢？
pointer-events: none 可用來提高滾動時的幀頻。的確，當滾動時，鼠標懸停在某些元素上，則觸發其上的 hover 效果，然而這些影響通常不被用戶注意，並多半導致滾動出現問題。對 body 元素應用 pointer-events: none ，禁用了包括 hover 在內的鼠標事件，從而提高滾動性能。
|
1 2 3 |
|
大概的做法就是在頁面滾動的時候, 給 <body> 添加上 .disable-hover 樣式，那麼在滾動停止之前, 所有鼠標事件都將被禁止。當滾動結束之後，再移除該屬性。
可以查看這個 demo 頁面。
上面說 pointer-events: none 可用來提高滾動時的幀頻 的這段話摘自 pointer-events-MDN ，還專門有文章講解過這個技術：
使用pointer-events:none實現60fps滾動 。
這就完了嗎？沒有，張鑫旭有一篇專門的文章，用來探討 pointer-events: none 是否真的能夠加速滾動性能，並提出了自己的質疑：
pointer-events:none提高頁面滾動時候的繪製性能？
結論見仁見智，使用 pointer-events: none 的場合要依據業務本身來定奪，拒絕拿來主義，多去源頭看看，動手實踐一番再做定奪。