我正在为一个已经存在的桌面站点开发移动端响应式版本，该站点上已有许多繁重的hover效果。当我在触摸屏幕上滚动时，经常会发生一些性能消耗大的hover操作，例如淡入一个大的box-shadow和/或动画border。显然，我不需要在移动浏览器上使用这些东西，我听说仅在移动设备上禁用滚动悬停可以实现巨大的性能提升。
是否有一种简单的方法，只在移动设备上滚动期间临时禁用所有hover效果？从用户体验角度来看，这样做是否安全？从性能角度来看，是否值得实施？
如何在移动设备上滚动时禁用:hover？
3
- bwitkowicz
4个回答
1
你可以设置所有悬停效果仅在 body 具有特定类时发生。这样，您只需在想要切换效果时添加/删除该类即可。
HTML
CSS
HTML
<body class="alloweffects">
<a>Some text</a>
</body>
CSS
.alloweffects a:hover {
color:red;
}
然后，要仅在滚动期间防止效果，您可以简单地侦听scroll事件并相应地设置类。
关于性能：
我认为性能收益将是微不足道的，但它可能会因不同的浏览器和设备而有所不同。
但基本上应该意味着更少的事件侦听器，这意味着更多的内存来处理其他事情，其中包括滚动。
如果我们谈论大量元素，则我认为性能收益将更显着-特别是在弱设备上。
- Radicate
0
这需要一些测试，但问题是：
您想为移动设备使用什么断点（通常为480px）
如何选择所有当前可悬停的项目
您需要覆盖哪些效果
无论如何，一个好的起点可以是：
@media screen and (max-width: 480px) {
:hover > * {
// override current effects to none
}
- maioman
2
我可能误解了OP的意思，但他不是说他只想在滚动期间防止效果吗？ - Radicate
我重新阅读了问题，你可能是正确的.. 我同意你使用JS监听滚动事件的答案。 - maioman
0
你想要使用 pointer-events: none;
CSS：
.disable-hover {
pointer-events: none;
}
Javascript：
var body = document.body,
timer;
window.addEventListener('scroll', function() {
clearTimeout(timer);
if(!body.classList.contains('disable-hover')) {
body.classList.add('disable-hover')
}
timer = setTimeout(function(){
body.classList.remove('disable-hover')
},500);
}, false);
- Strelok
2
4无法正常工作。如果您向下滚动并尝试快速点击/触摸链接，则由于pointer-events:none仍然处于活动状态，链接将无法跟随。在iPhone 6+上进行测试。这是一种愚蠢的黑客技巧，请勿使用！ - Janning Vygen
1在这里使用
pointer-events: none; 是非常糟糕的想法。它不仅会禁用悬停状态，还会做更多的事情。 - Brandon Durham-2
在你的响应式CSS中，为元素添加一个x:hover类，但保留它为空。
如果这样不起作用，就取消效果。
- UTD
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接