iScroll-javascript、jquery、iscrollを使用して現在のページにクラスを追加します

タイトルが示すように、現在の「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");
});

しかし、喜びはありません。多くの検索を実行して、同じ状況を探して見つけます。それはかなり単純なものでなければなりません。

回答：

回答№1は2

ええ、それは少しトリッキーです。少し前に、リンクとページに「アクティブ」クラスを追加しようとしました。

スクロール終了後：

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");
}

私を困らせることが1つだけあります。クラスとしてすべてのセクションにページ番号を指定する必要があります。

<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デモ

---

回答№2の場合は0

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

});
}

---