我试图让用户在使用鼠标滚轮时自动滚动到下一篇文章。以下代码确实有效,但是,它只会滚动到下一篇文章一次。见下图:
此外,我禁用了溢出,以便用户无法手动滚动
我有以下代码:
HTML
<article class="dienst-wrapper">
...
</article>
<article class="dienst-wrapper">
...
</article>
jQuery
function scrollToNextDiv(){
var locatie = $('article.dienst-wrapper').next("article.dienst-wrapper");
var offset = 0;
var target = $(locatie).offset().top - offset;
$('html, body').animate({scrollTop:target}, 750);
event.preventDefault();
}
我怎样才能解决这个问题?谢谢!!
如果您将文章放在某个容器中,其中没有其他元素,而是具有“dienst-wrapper”类的文章,您可以按照以下步骤操作:
在任何函数之外声明一些变量,例如:
var articleIndex = 1;
然后将您的函数重命名为:
function scrollToDiv(articleIndex) {...}
更改您的“locatie”变量如下:
var locatie = $('article.dienst-wrapper:nth-child(' + articleIndex + ')');
在函数中,你检测滚动,检查它是向下滚动还是向上滚动(我不知道你是怎么做的,所以我跳过了这个代码),然后用增加或减少的文章索引来触发函数,但记住避免去下面1 和超过文章数量,代码应该类似于这样:
//inside scroll listener function
if (scroll up) {
if (articleIndex > 1) {
scrollToDiv(--articleIndex);
}
} else {
if (articleIndex < $('article.dienst-wrapper').length) {
scrollToDiv(++articleIndex);
}
}
如果文章容器内有一些其他元素,上层代码将不起作用。然后您可以按照以下步骤操作:
在任何函数之外声明一些变量,例如:
var articleIndex = 0;
获取文章集合到一个数组(仍然在任何函数之外):
var articlesCollection = $('article.dienst-wrapper');
然后将您的函数重命名为:
function scrollToDiv(articleIndex) {...}
更改您的“locatie”变量如下:
var locatie = articlesCollection[articleIndex];
在函数中,你检测滚动,检查它是向下滚动还是向上滚动(我不知道你是怎么做的,所以我跳过了这个代码),然后用增加或减少的文章索引来触发函数,但记住避免去下面1 和超过文章数量,代码应该类似于这样:
//inside scroll listener function
if (scroll up) {
if (articleIndex > 0) {
scrollToDiv(--articleIndex);
}
} else {
if (articleIndex < articlesCollection.length - 1) {
scrollToDiv(++articleIndex);
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句