Question

我正在尝试在悬停时进行简单的左右滚动。我真的不确定我做错了什么，我将其悬停，但它只会移动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()逻辑）仅触发一次。如果你想重复执行一个动作，而元素已经超过了那些你需要实现自己逻辑的元素。

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

另请注意，您可以通过在两个元素上使用公共类以及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;
}

如果要加快或减慢滚动速度，请更改间隔

的延迟

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

1 个答案: