使用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

Answer 2

var workCase; 

function loadcase() { 
    workCase = new IScroll('#work-case', { 
    mouseWheel: true, 
    resizeScrollbars: true, 
    snap: 'section', 
    interactiveScrollbars: true, 
    mouseWheelSpeed: 10, 
    scrollX: true, 
    scrollY: false, 
    momentum: true, 
    snapSpeed: 800, 
    scrollbars: 'custom', 
    wheelAction: 'scroll' 
    }); 

    workCase.on('scrollEnd', function() { 
    var sectionIndex = Number(this.currentPage.pageY); 

    var iScrollConteiner = $('#work-case').children()[0]; 
    var dataNumber = $(iScrollConteiner)[0].children[sectionIndex].className; 

    var activeSection = $('section[class="' + dataNumber + '"]'); 

    $('section').removeClass('active'); 
    $(activeSection).addClass('active'); 

    }); 
}