在手機上滾動時如何禁用：hover？
[英]How to disable :hover when scrolling on mobile?
問題描述
我正在做一個已經存在的桌面網站的移動版（准確地說是響應版），它已經對它產生了很大的hover效果。 它經常發生，而不是當我通過觸摸屏幕在移動設備上滾動時，它會觸發一些性能高的hover動作，例如在大的box-shadow淡化和/或設置動畫border 。 出於顯而易見的原因，我不需要在移動瀏覽器上使用它，而且我聽說僅對移動設備禁用滾動鼠標懸停可以提高性能。
有沒有一種方法可以僅在移動設備上滾動時輕松地臨時禁用所有懸停效果 ？ 它是安全的（從UX角度而言），是否值得實施（從性能的角度來看）？
4 個解決方案
解決方案1
1 2014-12-28 23:23:12
您可以將所有懸停效果設置為僅在主體具有特定類別時發生。 當您想要切換效果時，這將允許您簡單地添加/刪除該類。
的HTML
<body class="alloweffects">
<a>Some text</a>
</body>
的CSS
.alloweffects a:hover {
color:red;
}
然后，僅在滾動期間防止出現效果，您只需偵聽滾動事件並相應地設置類即可。
關於性能：
我相信性能提升將很小，但在不同的瀏覽器和設備上可能會有所不同。
但是從根本上講，這應該意味着事件監聽器更少，這意味着更多的內存可以處理其他事物，其中包括滾動。
如果我們談論的是大量元素，我相信性能提升將更為顯着-特別是在較弱的設備上。
解決方案2
0 2014-12-28 23:26:01
這值得一點測試，但問題是：
您想在移動設備上使用哪個斷點（通常是480px）
如何選擇所有當前可懸停的項目
您需要覆蓋哪些效果
無論如何，一個好的起點可以是：
@media screen and (max-width: 480px) {
:hover > * {
// override current effects to none
}
解決方案3
0 已采納 2014-12-29 00:47:56
您想使用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);
解決方案4
-2 2014-12-28 23:18:26
在您的響應式CSS中，為元素添加ax：hover類，但將其留空。 如果那不起作用，則取消效果。
當在特定 Div 上啟動滑動時，如何在移動設備上禁用頁面滾動？
[英]How to disable scrolling of the page on mobile when the swipe is initiated on a specific Div?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.