我正在做一个已经存在的桌面网站的移动(准确地说是响应式)版本，该网站已经有很多强大的 hover 效果。它经常发生，当我通过触摸屏幕在移动设备上滚动它时，它会触发一些性能较重的 hover 操作，例如在大 box-shadow 中淡入淡出和/或动画 边界。出于明显的原因，我不需要在移动浏览器上使用它，而且我听说仅在移动设备上禁用悬停滚动可以带来很大的性能提升。
有没有办法在仅在移动设备上滚动时轻松地暂时禁用所有悬停效果？它是否安全(从用户体验的 Angular 来看)并且是否值得实现(从性能的 Angular 来看)？
最佳答案
您可以将所有悬停效果设置为仅在 body 具有特定类别时发生。 这将允许您在想要切换效果时简单地添加/删除该类。
HTML
<body class="alloweffects">
<a>Some text</a>
</body>
CSS
.alloweffects a:hover {
color:red;
}
然后，为了仅在滚动期间防止效果，您可以简单地监听 scroll 事件并相应地设置类。
关于性能:
我相信性能提升会很小，但它可能会因浏览器和设备的不同而有所不同。
但基本上它应该意味着更少的事件监听器，意味着更多的内存来处理其他事情，滚动就是其中之一。
如果我们谈论的是大量元素，我相信性能提升会更加显着 - 尤其是在性能较差的设备上。
关于javascript - 如何禁用 :hover when scrolling on mobile?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27681404/