使用 Jquery 向下滚动 - 悬停

Question

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

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

具体问题：如果您设置滚动间隔，它将继续触发，直到您可以使用函数返回的 id 清除该间隔时将鼠标移开。你有if (hover = true) {which should beif (hover === true) {或者因为它是一个布尔值，所以简单地使用它，if (hover) {尽管我没有看到在这里使用它的理由。注意这里的“this”this.intervalId是带有的元素，#down1但它在这里工作，因为我们在两个事件处理程序中都有它，最好使用一个命名空间，如var myApp ={intervalId:null,scrollElement:function(scrollTarget, scrollBy) {}};引用myApp.intervalId为那个和被调用的函数（而不是一个全局的var intervalId;，例如）可选的：您还可以按照我的说明创建一个函数并将其称为传递参数，您甚至可以重用该函数。观察：我不喜欢<br />仅仅添加空间，所以我删除了它并在底部添加了填充到父级而不是<p></p>考虑<div>用边距或填充来空间的东西我注意到你有一堆编号的课程。如果您出于某种原因定位它们，好的，但是您也可以检测元素的索引，例如 jQuery 有一个基于 0 的索引，例如，$('.likeavoid').index();或者如果您知道$('.likeavoid').eq(5);要定位一个的索引值我添加了一个在元素标记中存储间隔值的示例，如果将其扩展到所有值，则可以将相同的事件用于多个元素分组。您还可以通过参考平滑滚动：单击锚链接时平滑滚动function scrollElement(scrollTarget, scrollBy) {&nbsp; scrollTarget.scrollTop(scrollTarget.scrollTop() + scrollBy);}$("#down1").on({&nbsp; mouseenter: function(event) {&nbsp; &nbsp; // these could also be stored on event.target like I did for the interval&nbsp; &nbsp; let scrollAmount = 150; //amount could be stored&nbsp; &nbsp; let scrollTarget = $('#avoidOptions'); //id could be stored&nbsp; &nbsp; let timeInterval = $(event.target).data("scroll-interval");&nbsp; &nbsp; this.intervalId = window.setInterval(scrollElement, timeInterval, scrollTarget, scrollAmount);&nbsp; },&nbsp; mouseleave: function(event) {&nbsp; &nbsp; window.clearInterval(this.intervalId);&nbsp; }});.scrollingOptions {&nbsp; height: 30vh;&nbsp; width: 100%;&nbsp; overflow: auto;&nbsp; z-index: 1000;&nbsp; padding-bottom: 1em;}.scroller {&nbsp; border: solid 1px #EEEEEE;&nbsp; background-color: #eeffff;&nbsp; margin-top: 1em;}.likeavoid {&nbsp; 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'>&nbsp; <p class='likeavoid avoid1'>1</p>&nbsp; <p class='likeavoid avoid2'>2</p>&nbsp; <p class='likeavoid avoid3'>3</p>&nbsp; <p class='likeavoid avoid4'>4</p>&nbsp; <p class='likeavoid avoid5'>5</p>&nbsp; <p class='likeavoid avoid6'>6</p>&nbsp; <p class='likeavoid avoid7'>7</p>&nbsp; <p class='likeavoid avoid8'>8</p>&nbsp; <p class='likeavoid avoid9'>9</p>&nbsp; <p class='likeavoid avoid10'>10</p>&nbsp; <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_MouseEventfunction scrollElement(scrollTarget, scrollBy) {&nbsp; scrollTarget.scrollTop(scrollTarget.scrollTop() + scrollBy);}function enterHandler(event) {&nbsp; // these could also be stored on event.target like I did for the interval&nbsp; let scrollAmount = 150; //amount could be stored&nbsp; let scrollTarget = $('#avoidOptions'); //id could be stored&nbsp; let timeInterval = $(event.target).data("scroll-interval");&nbsp; this.intervalId = window.setInterval(scrollElement, timeInterval, scrollTarget, scrollAmount);&nbsp; event.preventDefault();}function leaveHandler(event) {&nbsp; window.clearInterval(this.intervalId);&nbsp; event.preventDefault();}$("#down1")&nbsp; .on('touchstart', enterHandler).on('touchend', leaveHandler)&nbsp; .on('mouseenter', enterHandler).on('mouseleave', leaveHandler);.scrollingOptions {&nbsp; height: 30vh;&nbsp; width: 100%;&nbsp; overflow: auto;&nbsp; z-index: 1000;&nbsp; padding-bottom: 1em;}.scroller {&nbsp; border: solid 1px #EEEEEE;&nbsp; background-color: #eeffff;&nbsp; margin-top: 1em;}.likeavoid {&nbsp; 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'>&nbsp; <p class='likeavoid avoid1'>1</p>&nbsp; <p class='likeavoid avoid2'>2</p>&nbsp; <p class='likeavoid avoid3'>3</p>&nbsp; <p class='likeavoid avoid4'>4</p>&nbsp; <p class='likeavoid avoid5'>5</p>&nbsp; <p class='likeavoid avoid6'>6</p>&nbsp; <p class='likeavoid avoid7'>7</p>&nbsp; <p class='likeavoid avoid8'>8</p>&nbsp; <p class='likeavoid avoid9'>9</p>&nbsp; <p class='likeavoid avoid10'>10</p>&nbsp; <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 2

一个间隔计时器对我有用：$("#down1").on({&nbsp; mouseenter: function() {&nbsp; &nbsp; this.timer = setInterval(function() {&nbsp; &nbsp; &nbsp; &nbsp; var y = $('#avoidOptions').scrollTop();&nbsp; //your current y position on the page&nbsp; &nbsp; &nbsp; &nbsp; $('#avoidOptions').scrollTop(y + 150);&nbsp; &nbsp; }, 500);&nbsp; },&nbsp; mouseleave: function() {&nbsp; &nbsp; clearInterval(this.timer);&nbsp; }});setInterval 启动计时器，该函数在 500 毫秒后运行，然后重复。以 clearInterval 停止。此外，无需在将其设置为 true 后立即检查悬停是否为 true。我删除了那部分。演示：https : //jsfiddle.net/4vco2arg/$("#down1").on({&nbsp; mouseenter: function() {&nbsp; &nbsp; this.timer = setInterval(function() {&nbsp; &nbsp; &nbsp; var y = $('#avoidOptions').scrollTop(); //your current y position on the page&nbsp; &nbsp; &nbsp; $('#avoidOptions').scrollTop(y + 150);&nbsp; &nbsp; }, 500);&nbsp; },&nbsp; mouseleave: function() {&nbsp; &nbsp; clearInterval(this.timer);&nbsp; }});.scrollingOptions {&nbsp; height: 30vh;&nbsp; width: 100%;&nbsp; overflow: auto;&nbsp; z-index: 1000;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class='scrollingOptions' id='avoidOptions'>&nbsp; <p class='likeavoid avoid1'>1&nbsp; </p>&nbsp; <p class='likeavoid avoid2'>2&nbsp; </p>&nbsp; <p class='likeavoid avoid3'>3&nbsp; </p>&nbsp; <p class='likeavoid avoid4'>4&nbsp; </p>&nbsp; <p class='likeavoid avoid5'>5&nbsp; </p>&nbsp; <p class='likeavoid avoid6'>6&nbsp; </p>&nbsp; <p class='likeavoid avoid7'>7&nbsp; </p>&nbsp; <p class='likeavoid avoid8'>8&nbsp; </p>&nbsp; <p class='likeavoid avoid9'>9&nbsp; </p>&nbsp; <p class='likeavoid avoid10'>10&nbsp; </p>&nbsp; <p class='likeavoid avoid11'>11&nbsp; </p>&nbsp; <br></div><p class='white text-center' id='down1'> Scroll Down - Hover Here</p>

Answer 3

在 setInterval(function, time) 中，您可以根据您想要滚动的流畅程度来决定时间。这里我使用了 100。如果您没有在代码中的任何其他地方使用悬停变量，那么您可以将其删除。因为它在向下滚动中没有发挥任何作用。var hover = false;var scrollInterval = null;$("#down1").on({mouseenter: function () {&nbsp; &nbsp; hover = true;&nbsp; &nbsp; scrollInterval = setInterval(function (){&nbsp; &nbsp; &nbsp; &nbsp; var y = $('#avoidOptions').scrollTop();&nbsp; //your current y position on the page&nbsp; &nbsp; &nbsp; &nbsp; $('#avoidOptions').scrollTop(y + 150)&nbsp; &nbsp; }, 100);},mouseleave: function () {&nbsp; &nbsp; hover = false;&nbsp; &nbsp; clearInterval(scrollInterval)&nbsp; &nbsp; }});