禁用滾動滾動以防止瀏覽器重畫

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懸停與JavaScript事件無關。

如果您想做自己想做的事，則需要通過在課堂上添加/刪除類來做到這一點

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：重要的是不良實踐

Answer 3

嘗試設定

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

觸發滾動事件時。 詳細文檔在這里 。