Question

我对div列表有悬停效果，css为：

.product:hover {
  background-color: #f6f6f7;
  border-left-color: #f6f6f7 !important;
  border-right-color: #f6f6f7 !important;
  outline: 10px solid #f6f6f7;
  z-index: 1;
}

我希望当用户滚动页面时不会触发此悬停效果，以免强制浏览器重新绘制/重排。

所以我试过了：

doc = $(document)
doc.scroll(->
  $('.product').unbind('mouseenter').unbind('mouseleave')
)

但它似乎不起作用，当我滚动悬停效果仍然被触发。知道为什么吗？或者我是如何实现这一目标的？

Answer 1

在您的css样式页面中添加此内容

.disable-hover { pointer-events: none; } 您需要做的是在开始滚动时将.disable-hover类添加到正文。然后，这允许用户光标穿过正文，从而禁用任何悬停效果。

 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);

添加此脚本并执行它将起作用： -

Answer 2

CSS hover与JavaScript事件无关。

如果你想做你想做的事，你需要通过添加/删除一个onscroll类来完成它

var scrollTimer;
$(window).on("scroll", function() {
    if(scrollTimer) window.clearTimeout(scrollTimer);
    $("body").removeClass("effect");
    scrollTimer = window.setTimeout( function()
        $("body").removeClass("effect");
    }, 100);
});

和CSS

.effect .product:hover {
  background-color: #f6f6f7;
  border-left-color: #f6f6f7 !important;
  border-right-color: #f6f6f7 !important;
  outline: 10px solid #f6f6f7;
  z-index: 1;
}

和PS：使用重要的是BAD练习

Answer 3

尝试设置

document.body.style.pointerEvents = 'none';

触发滚动事件时。详细文档here。

在滚动时禁用悬停以防止浏览器重绘

3 个答案: