jquery悬停滚动条不适用于悬停

Question

我正在用jquery制作一个简单的滚动条来学习。但它在悬停时只运行一次。如何修复它？这是我的片段:-

$(document).ready(function(){
  $('.scrollbar').hover(function(e){
    var y = e.pageY - $(this).offset().top;
    $(this).children('.scroll-but').css({
      'top': y + 'px'
    });
  })
});

.scrollbar{
  position:relative;
  width:10px;
  height:500px;
  background:red;
}
.scroll-but{
  position:absolute;
  width:10px;
  height:10px;
  background:blue;
  right:0;
  top:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollbar"><div class="scroll-but"></div></div>

Answer 1

由于附加的事件处理程序是 .hover，该函数仅在触发悬停事件时运行，因此如果您将鼠标移动到目标元素内，则不会触发另一个悬停事件。

为此，您必须使用 .mousemove 事件，它会跟踪指针在目标元素上移动时的情况，并为您提供预期的结果。

$(document).ready(function(){
  $('.scrollbar').mousemove(function(e){
    var y = e.pageY - $(this).offset().top;
    $(this).children('.scroll-but').css({
      'top': y + 'px'
    });
  })
});

.scrollbar{
  position:relative;
  width:10px;
  height:500px;
  background:red;
}
.scroll-but{
  position:absolute;
  width:10px;
  height:10px;
  background:blue;
  right:0;
  top:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollbar"><div class="scroll-but"></div></div>