使用 Jquery 向下滚动 - 在 Hover

Question

目标：在 hover - 在 div 中向下滚动。 当 hover 停止时 - 停止在 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>

Answer 1

间隔计时器对我有用：

$("#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 启动定时器，function 在 500 ms 后运行，然后重复。 以 clearInterval 停止。 此外，无需在将 hover 设置为 true 后立即检查它是否为 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>

Answer 2

具体问题：

如果您设置滚动间隔，它将继续触发，直到您将鼠标移开，然后您可以使用 function 返回的 id 清除该间隔。

你有if (hover = true) {应该是if (hover === true) {或者因为它是 boolean 只需使用if (hover) {虽然我看不出有理由在这里使用它。

注意这里的“this” this.intervalId是带有#down1的元素，但它在这里可以工作，因为我们在两个事件处理程序中都有它，最好使用像var myApp ={intervalId:null,scrollElement:function(scrollTarget, scrollBy) {}}; 为此被称为myApp.intervalId和被称为 function （而不是像var intervalId;例如）

可选的：

您还可以按照我的说明创建一个 function 并将其称为传递参数，您甚至可以重用该 function。

---

观察：

• 我不是<br />的粉丝，只是为了添加空间，所以我删除了它并在底部添加了填充到父级
• 而不是<p></p>考虑一个带有边距或填充的<div>空间的东西
• 我注意到你有一堆编号的课程。 如果出于某种原因将它们作为目标，则可以，但是您也可以检测元素的索引，例如 jQuery 具有基于 0 的索引，例如$('.likeavoid').index(); 或者如果您知道索引值$('.likeavoid').eq(5); 瞄准一个
• 我添加了一个在元素标记中存储间隔值的示例，如果将其扩展到所有值，则可以将相同的事件用于多个元素分组。
• 您还可以通过引用平滑滚动：单击锚链接时平滑滚动

 function scrollElement(scrollTarget, scrollBy) { scrollTarget.scrollTop(scrollTarget.scrollTop() + scrollBy); } $("#down1").on({ mouseenter: function(event) { // these could also be stored on event.target like I did for the interval let scrollAmount = 150; //amount could be stored let scrollTarget = $('#avoidOptions'); //id could be stored let timeInterval = $(event.target).data("scroll-interval"); this.intervalId = window.setInterval(scrollElement, timeInterval, scrollTarget, scrollAmount); }, mouseleave: function(event) { window.clearInterval(this.intervalId); } });

 .scrollingOptions { height: 30vh; width: 100%; overflow: auto; z-index: 1000; padding-bottom: 1em; }.scroller { border: solid 1px #EEEEEE; background-color: #eeffff; margin-top: 1em; }.likeavoid { border: dashed 1px #EEEEEE; }

 <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> </div> <div class='scroller white text-center' id='down1' data-scroll-interval="1000"> Scroll Down - Hover Here</div>

在移动设备上未经测试：每个评论选项在移动设备上按规范正确反应。 参考https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent

 function scrollElement(scrollTarget, scrollBy) { scrollTarget.scrollTop(scrollTarget.scrollTop() + scrollBy); } function enterHandler(event) { // these could also be stored on event.target like I did for the interval let scrollAmount = 150; //amount could be stored let scrollTarget = $('#avoidOptions'); //id could be stored let timeInterval = $(event.target).data("scroll-interval"); this.intervalId = window.setInterval(scrollElement, timeInterval, scrollTarget, scrollAmount); event.preventDefault(); } function leaveHandler(event) { window.clearInterval(this.intervalId); event.preventDefault(); } $("#down1").on('touchstart', enterHandler).on('touchend', leaveHandler).on('mouseenter', enterHandler).on('mouseleave', leaveHandler);

 .scrollingOptions { height: 30vh; width: 100%; overflow: auto; z-index: 1000; padding-bottom: 1em; }.scroller { border: solid 1px #EEEEEE; background-color: #eeffff; margin-top: 1em; }.likeavoid { border: dashed 1px #EEEEEE; }

 <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> </div> <div class='scroller white text-center' id='down1' data-scroll-interval="1000"> Scroll Down - Hover Here</div>

Answer 3

在 setInterval(function, time) 中，您可以根据想要滚动的流畅程度来决定时间。 这里我使用了 100。如果您没有在代码中的其他任何地方使用 hover 变量，那么您可以将其删除。 因为它在向下滚动时没有任何作用。

var hover = false;
var scrollInterval = null;

$("#down1").on({
mouseenter: function () {

    hover = true;

    scrollInterval = setInterval(function (){
        var y = $('#avoidOptions').scrollTop();  //your current y position on the page
        $('#avoidOptions').scrollTop(y + 150)
    }, 100);


},
mouseleave: function () {
    hover = false;
    clearInterval(scrollInterval)
    }
});

Answer 4

您可以使用短间隔计时器来执行此操作

window.setInterval(function(){
  /// call your function here
}, 500);

要停止计时器，您可以使用

clearInterval()

它应该看起来像这样

var scroll;

$("#down1").on({
  mouseenter: function() {
      scroll = window.setInterval(function() {
          var y = $('#avoidOptions').scrollTop();
          $('#avoidOptions').scrollTop(y + 150);
      }, 500);
    }
  },
  mouseleave: function() {
    clearInterval(scroll);
  }
});