首页猿问使用 Jquery 向下滚动 - 悬停

使用 Jquery 向下滚动 - 悬停

JavaScript

SMILET 2021-11-18 10:09:25

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

查看完整描述

3 回答

慕侠2389804

TA贡献1719条经验获得超6个赞

具体问题：

如果您设置滚动间隔，它将继续触发，直到您可以使用函数返回的 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;

}

</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;

}

</div>

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

反对回复 2021-11-18

慕田峪9158850

TA贡献1794条经验获得超7个赞

一个间隔计时器对我有用：

$("#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 后立即检查悬停是否为 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;

}

<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>

反对回复 2021-11-18

aluckdog

TA贡献1847条经验获得超7个赞

在 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)

}

});

反对回复 2021-11-18

3 回答
0 关注
261 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

使用 Jquery 向下滚动 - 悬停

使用 Jquery 向下滚动 - 悬停

3 回答

具体问题：

观察：

添加回答