悬停滚动水平条只运行一次？

Question

悬停滚动水平条只运行一次？

4

我试图在鼠标悬停时制作一个简单的左右滚动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上有效，而其他地方无效？]

- Scott Chambers

你想要什么？我不明白。 - Amitesh Kumar

https://dev59.com/2GzXa4cB1Zd3GeqPWrfJ?rq=1 - nullqube

它在这里运作正常，在FF浏览器使用堆栈片段。也许会因为其他问题在控制台出现错误，请检查您的控制台错误列表。 - Anup Yadav

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rory McCrossan · Accepted Answer

你的问题是因为mouseenter和mouseleave事件（作为hover()逻辑的基础）仅在鼠标进入/离开目标元素时触发一次。如果你想在元素悬停在这些元素上时重复执行某个操作，你需要实现自己的逻辑。

为了实现这个功能，你可以在hover()的mouseenter处理程序中使用一个间隔来重复移动所需元素的滚动位置。然后在mouseleave中，你可以清除该计时器。

另外请注意，你可以通过在两个元素上使用共同的类以及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>

如果您想加快或减慢滚动速度，请更改间隔延迟。