使用 Jquery 向下滚动 - On Hover

Question

目标：悬停时 - 在 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>

Answer 1

具体问题：

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

你有if (hover = true) {，它应该是if (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); 以定位一个
• 我添加了一个在元素标记中存储间隔值的示例，如果将其扩展到所有值，则可以将相同的事件用于多个元素分组。
• 您也可以通过引用平滑滚动：Smooth scrolling when clicking an anchor link

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 2

间隔计时器对我有用：

$("#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>

Answer 3

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

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);
  }
});