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

【问题标题】：Using multiscroll.js. Want to invert arrow after reaching end of slide使用 multiscroll.js。想要在到达幻灯片末尾后反转箭头
【发布时间】：2014-12-08 13:09:43
【问题描述】：

我在我的页面中使用 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')
}

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

【问题讨论】：

这里似乎已经回答了这个问题：stackoverflow.com/questions/3898130/…
$(document).ready(function() { $(window).scroll(function() { if($(window).scrollTop() + $(window).height() = = $(document).height()) { console.log("ddddd"); } }); document.addEventListener('scroll', onScroll); });我是这样用的。我不为我工作

标签： jquery css jquery-plugins multiscroll.js

【解决方案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');
        }
    }
});

【讨论】：

非常感谢兄弟。真的节省了我的时间。