javascript - 使用 iScroll 将类添加到当前页面

Question

正如标题所示，我正在尝试向当前的“捕捉到”元素添加一个类。有了这个:

var verticalScroll;
verticalScroll = new IScroll('#wrapper', {
    snap: true
});
verticalScroll.on('scrollEnd', function(){
    alert(this.currentPage);
});

滚动完成后我收到此警报:

[object Object]

所以我想我可以使用这样的东西来添加一个类:

verticalScroll.on('scrollEnd', function(){
    var newPage = this.currentPage;
    $(newPage).addClass('current');
});

但没有喜悦。进行了大量搜索以尝试找到相同的情况。这一定是相当简单的事情。

Answer 1

是的，这有点棘手。前段时间我尝试向链接和页面添加一个“事件”类。我最终得到了这个:

滚动结束后:

myScroll.on('scrollEnd', function () {
    addActiveClass();
});

功能:

function addActiveClass() {

    // get current page with iScroll
    var currentSection = myScroll.currentPage.pageY;

    // get current link and page
    var activeLink = $('nav a[href="' + currentSection + '"] span');
    var activeSection = $('section[class="' + currentSection + '"]');

    // remove active class from all links and pages
    $('nav a span, section').removeClass('active');

    // add active class to current link and page
    $(activeLink).addClass('active');
    $(activeSection).addClass('active');
}

只有一件事让我烦恼，你必须为每个部分提供一个页码作为一个类:

<section class="0"> … <section>
<section class="1"> … <section>
<section class="2"> … <section>

与链接相同:

<a href="0"></a>
<a href="1"></a>
<a href="2"></a>

但也许可以以某种方式动态添加。

不要忘记选项:

snap: 'section'

jsfiddle demo