Question

我正在尝试在Angular中制作一个全页面组件：我希望每个部分占据屏幕的100％高度，当我滚动一个部分（向上或向下）时，它会转到下一个/上一个部分。我声明了这个功能，它可以工作：

@HostListener('wheel', ['$event'])
    onScroll(event: WheelEvent) {
        if (event.deltaY < 0) {
            this.slidePrev();
        } else {
            this.slideNext();
        }
    }

现在，我想稍微更新一下，只有当滚动条位于顶部时滑动到上一张幻灯片，或者仅当滚动条位于底部时才滑动到下一张幻灯片。我使用JQuery这样做：

@HostListener('mousewheel', ['$event'])
    onScroll(event: WheelEvent) {
        if (this.isSliding) {
            event.preventDefault();
            return;
        }
        let $section = $(event.target).closest(".section");
        //$section.css("opacity", "0.99");
        //setTimeout(() => {
        //  $section.css("opacity", "1");
        //}, 100);

        if (event.deltaY < 0) {
            if ($section.scrollTop() == 0) this.slidePrev();
        } else {
            if ($section.scrollTop() == $section.prop("scrollHeight") - $section.height()) this.slideNext();
        }
    }

它第一次工作，但如果我向下滑动到下一张幻灯片，当我想要滚动移动我的滚动条时，它不会移动。我注意到在网站触发更新后（例如：更新样式的css：hover事件）滚动条再次移动。因此，如果我取消注释我的4条注释行，它会再次起作用，因为样式已更新。有人可以告诉我为什么吗？是否有更好的方法来解决这个问题？

编辑：

在slideNext（）和slidePrev（）中我使用的是$（）。animate（“scrollTop”，...）函数，它是破坏我滚动的函数

为什么mousewheel事件在我的代码中有效无效？

0 个答案: