Javascript 无法使滚动动画不触发滚动事件

我目前有许多div标记，可以在下面看到，每个都是视口的高度

<!-- .current represents the div the user is currently viewing -->
<div class="full-height current" id="id1">
    <div class="container">

    </div>
</div>

<div class="full-height" id="id2">
    <div class="container">
    </div>
</div>

<div class="full-height" id="id3">
    <div class="container">
    </div>
</div>

<div class="full-height" id="id4">
    <div class="container">
    </div>
</div>

<div class="full-height" id="id5">
    <div class="container">
    </div>
</div>

CSS包含在其中以防万一。100vh-111px是由于顶部的固定导航条为111px高

/* Makes the element take up the entire height of the screen */
.full-height{
    height: -o-calc(100vh - 111px); /* opera */
    height: -webkit-calc(100vh - 111px); /* google, safari */
    height: -moz-calc(100vh - 111px); /* firefox */
}

#id1 {
    background-color: red;
}
#id2 {
    background-color: blue;
}

#id3 {
    background-color: yellow;
}
#id4 {
    background-color: green;
}

#id5 {
    background-color: purple;
}

---

如果有人能给我一些解决问题的想法，那就太好了。

您将希望停止该事件并防止默认。以下是当前登录页中的一些代码：

 $(document).ready(function () {
        $('a.page-scroll').on('click', function(event) {
            var link = $(this);
            $('html, body').stop().animate({
                scrollTop: $(link.attr('href')).offset().top - 50
            }, 500);
            event.preventDefault();
        });
        $('body').scrollspy({
            target: '.navbar-fixed-top',
            offset: 80
        });

    });

它使用引导scrollspy，所以忽略它。但请注意，它会停止任何可能正在运行的滚动动画，然后还会调用

event.preventDefault（）

，以阻止滚动事件冒泡，从而成为递归事件

编辑：

好的，我看得更清楚了，基本问题是：无限滚动是代码没有检查scrollTop是否已经在“需要的位置”。您需要额外检查以使滚动条短路：

if (animating == false) {

        if ($(this).scrollTop() == lastScrollTop) return;

        if (($(this).scrollTop() > lastScrollTop) && $(".current").next("div")) {
        console.log("down");

        $(".current").next("div").addClass("current");
        $(".current").first().removeClass("current");

        animating = true;
        $("html, body").stop().animate({
            scrollTop: $(".current").offset().top
        }, 1000,
        function () { lastScrollTop = $(this).scrollTop(); animating = false; });

        // If user scrolls up
    } else {
        if ($(".current").prev("div").length > 0) {
            console.log("up");

            $(".current").prev("div").addClass("current");
            $(".current").last().removeClass("current");

            $("html, body").stop().animate({
                scrollTop: $(".current").offset().top
            }, 1000, function () { lastScrollTop = $(this).scrollTop(); animating = false; });
        }
    }
}

---

否则，它将始终向上或向下滚动，永远不会稳定下来。也就是说，通过“工作”，这是一种糟糕的用户体验。它会跳来跳去，因为如果用户继续滚动，您的代码滚动将与当前scrollTop上的用户发生冲突。i、 e.您的代码将使其跳回上一个位置。

尝试将

滚动

事件处理程序定义为命名函数；在

scroll

处理程序之外定义

lastcolltop

；将

.one（）

替换为

.on（）

以允许动画在重新附加

滚动

事件之前完成；使用

.promise（）

，最多调用一次，以避免使用选择器

“html，body”

调用两次

.animate（）

完成

回调；替换单个

if

以检查下一个或上一个元素

.length

和

.animate（）

调用多个

if..else

条件和语句，动画函数调用；在

处重新附加
滚动
事件。然后（）
动画完成后
.promise（）


var lastScrollTop=0；
函数滚动条（事件）{
var scrollTop=$（this.scrollTop（）；
var direction=scrollTop>lastScrollTop？“下一步”：“上一步”；
变量el=$（“.current”）[方向]（“.full height”）；
console.log（方向==“下一步”？“向下”：“向上”）；
如果（标高为（“*”）{
$（“html，body”）.animate({
滚动顶部：el.offset（）.top
}，1000）。promise（）。然后（函数（）{
console.log（这个）
lastScrollTop=$（窗口）.scrollTop（）；
$（“当前”）
.removeClass（“当前”）[方向]（“div”）
.addClass（“当前”）
setTimeout（函数（）{
$（窗口）.1（“滚动”，滚动条）
})
});
}否则{
lastScrollTop=scrollTop；
$（窗口）.1（“滚动”，滚动条）
}
}
$（窗口）。一个（“滚动”，滚动条）
/*使元素占据屏幕的整个高度*/
.全高{
高度：-o-calc（100vh-111px）；
/*歌剧院*/
高度：-webkit计算（100vh-111px）；
/*谷歌，safari*/
高度：-moz计算（100vh-111px）；
/*火狐*/
}
#id1{
背景色：红色；
}
#id2{
背景颜色：蓝色；
}
#id3{
背景颜色：黄色；
}
#id4{
背景颜色：绿色；
}
#id5{
背景颜色：紫色；
}

否
。当前的
元素出现在
html
上？@guest271314不确定您所说的
html
的意思是什么，问题中的
似乎不包含具有
类
的元素。当前的
元素在
滚动
事件句柄中引用。第一个div标记包含一个.current classYes，你说得对
lastScrollTop
在初始滚动时将是
undefined
？我不太清楚如何实现这一点。我将
.animate（）
更改为
.stop（）.animate（）
，并添加了
事件.preventDefault（）
，但它仍然无限滚动，只是随着时间的推移而变慢。@Shikkediel请参阅更新的帖子；包含
“html”
选择器，用
.promise（）替换
.animate（）
完成
回调函数
if (animating == false) {

        if ($(this).scrollTop() == lastScrollTop) return;

        if (($(this).scrollTop() > lastScrollTop) && $(".current").next("div")) {
        console.log("down");

        $(".current").next("div").addClass("current");
        $(".current").first().removeClass("current");

        animating = true;
        $("html, body").stop().animate({
            scrollTop: $(".current").offset().top
        }, 1000,
        function () { lastScrollTop = $(this).scrollTop(); animating = false; });

        // If user scrolls up
    } else {
        if ($(".current").prev("div").length > 0) {
            console.log("up");

            $(".current").prev("div").addClass("current");
            $(".current").last().removeClass("current");

            $("html, body").stop().animate({
                scrollTop: $(".current").offset().top
            }, 1000, function () { lastScrollTop = $(this).scrollTop(); animating = false; });
        }
    }
}