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

2023年10月3日 199次阅读

我正试图在悬停时做一个简单的左右滚动.我真的不确定我做错了什么,我将其悬停,但它只会移动if语句中指定的50.我还在徘徊时是否需要添加某种循环？任何帮助将不胜感激.

基本上,我希望能够将鼠标悬停在左右两个黑盒子上,当它徘徊时向右或向左移动,当我移开鼠标时它应该停止.

$("#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,而不是其他地方？]

最佳答案 您的问题是因为当鼠标进入/离开目标元素时,mouseenter和mouseleave事件(支持hover()逻辑)仅触发一次.如果要在元素超过这些元素的情况下重复执行操作,则需要实现自己的逻辑.

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

另请注意,您可以通过在两个元素上使用公共类以及数据属性来控制间隔的每个刻度的移动增量来干掉代码.试试这个：

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>

如果要加快或减慢滚动速度,请更改间隔的延迟

点赞