Question

我有一个页面，其中有一列，每行包含一个视频。使用绝对定位的<div>元素，我有一些JavaScript可使鼠标滚轮以等于行高加上行间距的间隔滚动。但是，如果在鼠标指针悬停在i帧上方时发生鼠标滚轮事件，则在滚动时，鼠标滚轮将不再确认“行高”规则，并以奇数间隔返回到滚动。换句话说，它弄乱了鼠标滚轮的滚动行为。在这里查看： https://codepen.io/Wcomp/pen/yZQegd

将指针悬停在白色区域或红色矩形上并使用鼠标滚轮滚动，然后将鼠标悬停在视频上并使用鼠标滚轮滚动以查看我在说什么。

有什么办法可以防止这种情况发生？希望鼠标滚轮始终在行的高度上上下滚动，即使鼠标指针悬停在i帧/视频上时发生鼠标滚轮事件也是如此。这是我用于鼠标滚轮滚动的代码：

(function() {
  var delay = false;

  $(document).on('mousewheel DOMMouseScroll', function(event) {

    event.preventDefault();

    if(delay) return;

    delay = true;

    setTimeout(function(){delay = false},200)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('div');

    if(wd < 0) {
      for(var i = 0 ; i < a.length ; i++) {
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      }
    }
    else {
      for(var i = a.length-1 ; i >= 0 ; i--) {
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      }
    }

    if(i >= 0 && i < a.length) {
      $('html,body').animate({
        scrollTop: a[i].offsetTop
      });
    }
  });
})();

感谢您的帮助！

如何防止i-frame劫持鼠标滚轮滚动行为

0 个答案: