javascript - 悬停时水平滚动只运行一次？

Question

我正在尝试在悬停时左右滚动 div。我真的不确定我做错了什么，我悬停着，但它只移动了 if 语句中指定的 50。我还在悬停时是否需要添加某种循环？任何帮助将不胜感激。

基本上，我希望能够将鼠标悬停在 right 和 left 这两个黑框上，当它悬停时向右或向左移动，当我移除鼠标时它应该停止。

$("#left").hover(function() {
  var leftPos = $('#wrapper').scrollLeft();
  $("#wrapper").animate({
    scrollLeft: leftPos - 50
  }, 1);
});

$("#right").hover(function() {
  var leftPos = $('#wrapper').scrollLeft();
  $("#wrapper").animate({
    scrollLeft: leftPos + 50
  }, 1);
});

html,
body {
  background-color: #eeeeee;
  margin: 0;
  overflow-x: scroll;
  overflow-y: hidden;
}

#left {
  position: absolute;
  width: 10vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: black;
}

#right {
  position: absolute;
  width: 10vw;
  height: 100vh;
  top: 0;
  right: 0;
  z-index: 1;
  background-color: black;
}

#wrapper {
  width: 100%;
  height: 100vh;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
}

#inner_wrap {
  width: 4000px;
  height: 100vh;
  align-items: center;
  display: flex;
}

#firstcontent {
  align-items: center;
  display: flex;
  vertical-align: middle;
  color: white;
  float: left;
  margin-left: 20vw;
  width: 400px;
  height: 250px;
  background-color: #2d2d2d;
}

.thumbone {
  width: 400px;
  height: 250px;
  background-color: lightgrey;
  display: inline-block;
}

.thumbtwo {
  width: 400px;
  height: 250px;
  background-color: grey;
  display: inline-block;
}

<script src="https://corporate3.bdjobs.com/js/jquery.min.js"></script>
<div id="left"></div>
<div id="right"></div>
<div id="wrapper">
  <div id="inner_wrap">
    <div id="firstcontent">hover or scroll</div>
    <div class="thumbone"></div>
    <div class="thumbtwo"></div>
    <div class="thumbone"></div>
    <div class="thumbtwo"></div>
    <div class="thumbone"></div>
    <div class="thumbtwo"></div>
    <div class="thumbone"></div>
    <div class="thumbtwo"></div>
  </div>
</div>

脚本链接 jsfiddle

[还有一个旁注，为什么这只适用于 jsfiddle 而不是其他地方？]

Answer 1

您的问题是因为 mouseenter 和 mouseleave 事件(支持 hover() 逻辑)仅在鼠标进入时触发一次/离开目标元素。如果您想重复执行某个操作，同时该元素位于这些元素之上，您需要实现自己的逻辑。

要实现此目的，您可以在 hover() 的 mouseenter 处理程序中使用间隔来重复移动所需元素的滚动位置。然后在 mouseleave 中，您可以清除该计时器。

另请注意，您可以通过在两个元素上使用公共(public)类以及 data 属性来控制间隔的每个刻度的移动增量，从而使您的代码变干。试试这个:

var timer;
$('.hover-scroll').hover(function() {
  var increment = $(this).data('pos');
  timer = setInterval(function() {
    var leftPos = $("#wrapper").scrollLeft();
    $("#wrapper").animate({
      scrollLeft: leftPos + increment
    }, 1);
  }, 50);
}, function() {
  clearInterval(timer);
});

html,
body {
  background-color: #eeeeee;
  margin: 0;
  overflow-x: scroll;
  overflow-y: hidden;
}

#left {
  position: absolute;
  width: 10vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: black;
}

#right {
  position: absolute;
  width: 10vw;
  height: 100vh;
  top: 0;
  right: 0;
  z-index: 1;
  background-color: black;
}

#wrapper {
  width: 100%;
  height: 100vh;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
}

#inner_wrap {
  width: 4000px;
  height: 100vh;
  align-items: center;
  display: flex;
}

#firstcontent {
  align-items: center;
  display: flex;
  vertical-align: middle;
  color: white;
  float: left;
  margin-left: 20vw;
  width: 400px;
  height: 250px;
  background-color: #2d2d2d;
}

.thumbone {
  width: 400px;
  height: 250px;
  background-color: lightgrey;
  display: inline-block;
}

.thumbtwo {
  width: 400px;
  height: 250px;
  background-color: grey;
  display: inline-block;
}

<script src="https://corporate3.bdjobs.com/js/jquery.min.js"></script>
<div id="left" class="hover-scroll" data-pos="-50"></div>
<div id="right" class="hover-scroll" data-pos="50"></div>
<div id="wrapper">
  <div id="inner_wrap">
    <div id="firstcontent">hover or scroll</div>
    <div class="thumbone"></div>
    <div class="thumbtwo"></div>
    <div class="thumbone"></div>
    <div class="thumbtwo"></div>
    <div class="thumbone"></div>
    <div class="thumbtwo"></div>
    <div class="thumbone"></div>
    <div class="thumbtwo"></div>
  </div>
</div>

如果你想加快或减慢滚动速度，改变间隔上的延迟