时间戳

首页 > 解决方案 > 使用 Jquery 向下滚动 - On Hover

javascript - 使用 Jquery 向下滚动 - On Hover

问题描述

目标：悬停时 - 在 div 内向下滚动。当悬停停止时 - 停止在 div 内滚动。这是我尝试过的。这有效，只是每次鼠标悬停在#down1 上时它只会向下悬停 150 像素。所以它不是连续的。有任何想法吗？

hovered = false;

$("#down1").on({
  mouseenter: function() {
    hover = true;
    if (hover = true) {
      var y = $('#avoidOptions').scrollTop(); //your current y position on the page
      $('#avoidOptions').scrollTop(y + 150);
    }
  },
  mouseleave: function() {
    hover = false;
  }
});
.scrollingOptions {
  height: 30vh;
  width: 100%;
  overflow: auto;
  z-index: 1000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='scrollingOptions' id='avoidOptions'>
  <p class='likeavoid avoid1'>1
  </p>
  <p class='likeavoid avoid2'>2
  </p>
  <p class='likeavoid avoid3'>3
  </p>
  <p class='likeavoid avoid4'>4
  </p>
  <p class='likeavoid avoid5'>5
  </p>
  <p class='likeavoid avoid6'>6
  </p>
  <p class='likeavoid avoid7'>7
  </p>
  <p class='likeavoid avoid8'>8
  </p>
  <p class='likeavoid avoid9'>9
  </p>
  <p class='likeavoid avoid10'>10
  </p>
  <p class='likeavoid avoid11'>11
  </p>
  <br>
</div>
<p class='white text-center' id='down1'> Scroll Down - Hover Here</p>

标签： javascriptjqueryscroll

解决方案

间隔计时器对我有用：

$("#down1").on({
  mouseenter: function() {
    this.timer = setInterval(function() {
        var y = $('#avoidOptions').scrollTop();  //your current y position on the page
        $('#avoidOptions').scrollTop(y + 150);
    }, 500);
  },
  mouseleave: function() {
    clearInterval(this.timer);
  }
});

setInterval 启动定时器，该函数在 500 毫秒后运行，然后重复。以 clearInterval 停止。此外，没有必要在将其设置为 true 后立即检查 hover 是否为 true。我删除了那部分。

演示：https ://jsfiddle.net/4vco2arg/

$("#down1").on({
  mouseenter: function() {
    this.timer = setInterval(function() {
      var y = $('#avoidOptions').scrollTop(); //your current y position on the page
      $('#avoidOptions').scrollTop(y + 150);
    }, 500);
  },
  mouseleave: function() {
    clearInterval(this.timer);
  }
});
.scrollingOptions {
  height: 30vh;
  width: 100%;
  overflow: auto;
  z-index: 1000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='scrollingOptions' id='avoidOptions'>
  <p class='likeavoid avoid1'>1
  </p>
  <p class='likeavoid avoid2'>2
  </p>
  <p class='likeavoid avoid3'>3
  </p>
  <p class='likeavoid avoid4'>4
  </p>
  <p class='likeavoid avoid5'>5
  </p>
  <p class='likeavoid avoid6'>6
  </p>
  <p class='likeavoid avoid7'>7
  </p>
  <p class='likeavoid avoid8'>8
  </p>
  <p class='likeavoid avoid9'>9
  </p>
  <p class='likeavoid avoid10'>10
  </p>
  <p class='likeavoid avoid11'>11
  </p>
  <br>
</div>
<p class='white text-center' id='down1'> Scroll Down - Hover Here</p>

推荐阅读