jquery - 使用 multiscroll.js。到达幻灯片末尾后想要反转箭头

Question

我在我的页面中使用 multiscroll.js。见下文。

$('#myContainer').multiscroll({
    sectionsColor: ['#116a9e'],
    anchors: ['welcome', 'second', 'third'],
    menu: '#menu',
    navigation: true,
    navigationTooltips: ['1', '2', '3'],
    loopBottom: true,
    loopTop: true
});

我的箭头指向下方，如果我到达页面末尾，我希望箭头必须指向上方。但是我不能在这个下面使用。

document.addEventListener('scroll', onScroll);
function onScroll(){
console.log("Hello");
$('.arrow-scroll').toggleClass('scroll-down scroll-up')
}

此代码永远不会被调用。如果我用“点击”代替“滚动”，一切正常。

Answer 1

multiScroll.js 实际上不会滚动网站，但它会更改网站的 top 或 translate3d 属性。因此，您的 scroll 事件甚至不会被触发。该网站没有滚动条。

您应该使用回调 afterLoad并在那里添加您的代码。

类似于:

$('#myContainer').multiscroll({
    sectionsColor: ['#116a9e'],
    anchors: ['welcome', 'second', 'third'],
    menu: '#menu',
    navigation: true,
    navigationTooltips: ['1', '2', '3'],
    loopBottom: true,
    loopTop: true,

    afterLoad: function(anchorLink, index){

        //supposing you have 4 sections on your site
        //this will fire when you reach the last one
        if(index == 4){
             $('.arrow-scroll').toggleClass('scroll-down scroll-up');
        }
    }
});