Glatte vertikale scrollen am Maus Rad in vanilla javascript?
Ich bin ein Riesen fan seit vanilla javascript, derzeit arbeite ich an einem Projekt, wo ich den implementieren muss, smooth-scrolling auf der Maus-Rad scrollen. Ich will diese umsetzen mit vanilla JS.
Ich fand ein jQuery-snippet auf der einige der Forschung, die wie folgt Aussehen.
$(window).on('mousewheel DOMMouseScroll', function(e) {
var dir,
amt = 100;
e.preventDefault();
if(e.type === 'mousewheel') {
dir = e.originalEvent.wheelDelta > 0 ? '-=' : '+=';
}
else {
dir = e.originalEvent.detail < 0 ? '-=' : '+=';
}
$('html, body').stop().animate({
scrollTop: dir + amt
},500, 'linear');
});Kann mir jemand helfen wie in gewusst wie: implementieren einer glatten Blättern, ohne über eine helper-Bibliothek wie jQuery oder sonstige library.
Gibt es viele Implementierungen, die Menschen getan haben, in jQuery. Aber ich will eine beste Umsetzung, die man tun kann in vanilla JS. Das kann überall implementiert in Reagieren, Winkel - & Vue überall.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wie wäre es damit:
JS:
CSS:
HTML:
Es durch den Aufruf
new SmoothScroll(target,speed,smooth)Argumente:
documentSchritt
glatt.
vielen Dank an @Phrogz für die Mausrad Normalisierung.
EDIT: Da Chrom 73 es ist erforderlich, markieren Sie den Ereignis-listener für das
mousewheelEreignis als nicht-passiv, um anrufen zu könnenpreventDefault()auf Sie. Dank @Fred K für diese.delta -= 1;ist für. wäre das nicht, führen Sie einen Bildlauf nach oben dauerhaft?[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>. Gelöst, verändert Sie sich diese Zeilen:target.addEventListener('mousewheel', scrolled, { passive: false }) target.addEventListener('DOMMouseScroll', scrolled, { passive: false }). Könnten Sie überprüfen, ob es funktioniert für Sie und Bearbeiten Sie Ihre ehrfürchtige Antwort?Safari is the new IEscrollTopauf diebodyelement, noch Lesen Sie dieclientHeightvon derhtmlelement.#in-line-linkgeht das Skript an die#locationaber nach, dass immer dann, wenn Sie das Rad springt zurück zur vorherigen Position aus irgendeinem Grund. Weiß jemand, wie man das vermeiden? Danke!poswenn jemand Klicks auf einen inline-linkDen code, den Sie veröffentlicht ist fast vanilla js. Nur einige ajustement
wenn Sie etwas Zeit haben, werfen Sie einen Blick auf Das Rad-event
hier die neue Sache wird der animate-Funktion
JS:
HTML:
Einer reinen JavaScript -
onscrollFall funktionieren wird:Dies ist ein cooles Leichtgewicht vanillaJS Bibliothek für die scrollbars. Einfache scrollbar
Könnten Sie es mit oder ohne sich mit dem eigentlichen Scrollbalken.