Fügen Sie der aktuellen Seite eine Klasse hinzu, indem Sie iScroll verwenden - Javascript, jquery, iscroll

Wie der Titel schon sagt, versuche ich, eine Klasse zum aktuellen "Ausrichtungselement" hinzuzufügen.

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

Ich erhalte diese Warnung, wenn das Scrollen abgeschlossen ist:

[object Object]

Also dachte ich, ich könnte so etwas benutzen, um eine Klasse hinzuzufügen:

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

Aber keine Freude. Viele Suchanfragen durchgeführt, um die gleiche Situation zu finden. Es muss etwas ziemlich Einfaches sein.

Antworten:

2 für die Antwort № 1

Ja, es ist ein bisschen knifflig. Vor einiger Zeit habe ich versucht, dem Link und der Seite eine "aktive" Klasse hinzuzufügen.

Nach dem Ende der Schriftrolle:

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

die Funktion:

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

Das einzige, was mich nervt, ist, dass Sie als Klasse jedem Abschnitt eine Seitenzahl geben müssen:

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

Gleiche mit Links:

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

Aber vielleicht könnte man das ja irgendwie dynamisch hinzufügen.

Und vergiss die Option nicht:

snap: "section"

jsfiddle Demo

---

0 für die Antwort № 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");

});
}

---