使用 Jquery 向下滚动

具体问题：如果您设置滚动间隔，它将继续触发，直到您可以使用函数返回的 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) {  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_MouseEventfunction 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>

使用 Jquery 向下滚动 - 悬停

3回答