使用iScroll將類添加到當前頁面

Question

正如標題所示，我正在嘗試將一個類添加到當前的“snapped-to”元素中。 有了這個：

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演示

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');

  });
}