我试图让用户在使用鼠标滚轮时自动滚动到下一篇文章。以下代码可以工作,但是,它只滚动到下一篇文章ONCE。见下图:
此外,我禁用溢出,以便用户无法手动滚动
我有以下代码:
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) {...}
var locatie = $('article.dienst-wrapper:nth-child(' + articleIndex + ')');
//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) {...}
var locatie = articlesCollection[articleIndex];
//inside scroll listener function
if (scroll up) {
if (articleIndex > 0) {
scrollToDiv(--articleIndex);
}
} else {
if (articleIndex < articlesCollection.length - 1) {
scrollToDiv(++articleIndex);
}
}