1) jQuery und das Mausrad-Plugin laden
Das Mouse Wheel Plugin finden Sie hier.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>2) Mausrad-Ereignis an den Körper anhängen
Die "30" steht für die Geschwindigkeit. preventDefault stellt sicher, dass die Seite nicht nach unten scrollt.
$(function() {
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
Siehe den Pen
Horizontales Scrollen mit dem Mausrad von Chris Coyier (@chriscoyier)
auf CodePen.
Ich suche schon lange danach, vielen Dank.
Ich möchte die gleiche Eigenschaft für vertikales Scrollen verwenden, möchte aber nicht, dass die vertikale Scrollleiste erscheint ... Kann mir jemand helfen?
@ezaz Um das zu erreichen, fügen Sie Ihrem Body-Element folgenden Stil hinzu
overflow: hidden;
Oder Sie könnten overflow-y:hidden verwenden, um das Vertikale zu spezifizieren
Hey
Danke für den Beitrag!
Es scheint in Firefox zu funktionieren, aber nicht in Chrome.
Irgendeine Idee, wie man es in Chrome zum Laufen bringt?
Danke.
Bei mir scheint es in Chrome zu funktionieren, aber nicht in Firefox!
Ich denke, das liegt daran, dass das Ereignis nicht für alle Browser gleich ist. Ich habe es früher so gemacht: (mit jQuery)
Dieser Code funktioniert bei mir nicht. Ich verwende auch zwei Skripte für das automatische Scrollen mit Ankern. Weiß jemand, wie man das beheben kann?
<script src="/js/jquery-1.4.4.min.js” type=”text/javascript”>
<script src="/js/jquery.localscroll-min.js” type=”text/javascript”>
<script src="/js/jquery.scrollTo-min.js” type=”text/javascript”>
<script src="/js/jquery.mousewheel.min.js” type=”text/javascript”>
$(document).ready(function () {
$.localScroll.defaults.axis = ‘x’;
$.localScroll();
$(function() {
$(“body”).mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
Ich glaube, ich habe dasselbe Problem. Hast du es zum Laufen gebracht?
Bitte senden Sie die Dateien jquery.localscroll-min.js und jquery.scrollTo-min.js.
Ich habe das ausprobiert und es funktioniert
$(window).mousewheel(function(event, delta) {
event.preventDefault();
var scroll = $(window).scrollLeft();
$(window).scrollLeft(scroll – (delta * 30));
});
Hallo, ich habe ein Problem und brauche Ihre Hilfe
Ich habe auf meiner Seite 4 absolut positionierte divs. Wie verwende ich diese Funktion, damit alle divs scrollen?
Derzeit kann ich nur das obere div scrollen
Hier ist die Seite: jb.existenzgruender-in.com
Gehen Sie zu Ihrem Index und fügen Sie scrooling=”yes” hinzu :) so einfach ist das, Kumpel!
Hallo,
Guter Beitrag!
Ich suche nach einer Funktion, die einen Zoomeffekt erzeugt, wenn man mit der Maus scrollt. Nicht horizontal oder vertikal, sondern in der „Z-Dimension“. Irgendwelche Ideen?
Genau das, was ich gesucht habe!
Es funktioniert perfekt auf Safari, aber nicht auf Firefox für mich. Zumindest nicht auf 3.6 OS, weiß jemand warum? Das herunterladbare Beispiel funktioniert auch nicht.
Ich habe es auch unter Firefox zum Laufen gebracht. Ich habe $(“body”) verwendet, um auf den Container zu verweisen, und es funktionierte perfekt in Chrome. Unter Firefox muss der Selektor aus irgendeinem Grund $(“html”) sein. Also habe ich beide zu $(“body, html”) kombiniert und jetzt funktioniert es. Sehen Sie den folgenden Ausschnitt
Ich hoffe, das funktioniert, und viel Spaß beim Coden!
— Kimmo
Ich habe mich zu Tode an diesem Problem gestarrt und dank deines angepassten Codes funktioniert es!
Danke Kimmo,
Kleajmp
Vielen Dank! Das hat mein Problem behoben. Und auch ein großes Dankeschön an den OP für die Implementierung. Sehr geschätzt.
Danke Kimmo, das hat es zum Laufen gebracht!
Warum zum Teufel lese ich keine Antworten, bevor ich selbst Fehler behebe…
Danke, es funktioniert einwandfrei!!
Kimmo, vielen Dank dafür. Ich konnte das stundenlang nicht herausfinden!
Danke Kimmo für deine Lösung! Sie funktioniert perfekt in FF und auch in den anderen Browsern – du hast mir den Tag gerettet!
Ich hatte dasselbe Problem, aber Kimmos Lösung war der Trick =).
Vielen Dank!
Grüße.
Das hat bei mir funktioniert! Danke.
Großartig, Chris, mach weiter mit neuen Snippets.
Absolut perfekt! Endlich die Lösung für horizontales Scrollen in allen (modernen) Browsern!
Vielen Dank! :-)
Das ist die Lösung, die ich wollte
Das wird mir bei meinem horizontalen Scroll-Portfolio helfen
Kimmo, das funktioniert tatsächlich nicht in Safari 5.1 unter Windows. Und ich habe noch keine Lösung gefunden.
Hallo, wie kann man das nur für ein bestimmtes Div statt für den gesamten Body oder nur für ein bestimmtes Tag zum Laufen bringen? Zum Beispiel für ein Div mit ID oder eine Tabelle.
Ähm, entschuldigung, aber das funktioniert nicht
Danke, das behebt mein Problem mit horizontalem Scrollen, wenn overflow: hidden ist. Scrollen funktioniert standardmäßig ohne Mausrad im FireFox, aber nicht in anderen Browsern. Mit deinen Tricks funktioniert es gut in Chrome usw. ... Danke nochmals.
Nein, es funktioniert nicht unter Firefox 8 mit $(“html, body”)
overflow: hidden bezieht sich auf das Ausblenden oder Scrollen von Inhalten, die zu groß für ihren Container sind
Fügen Sie den Sternselektor * hinzu.
Das Mausrad-Plugin ist nicht mehr zum Download verfügbar
Doch, das ist es ... du musst hierher gehen „https://github.com/brandonaaron/jquery-mousewheel/downloads“ ... ;) Ich hoffe, das hilft :)
Bei mir scheint es in Chrome zu funktionieren, aber nicht in Firefox!
Also ... hat jemand eine Lösung gefunden, damit das unter Safari funktioniert? Denn das ist keine praktikable Lösung, wenn es unter Safari nicht funktioniert, einem modernen Browser.
Entschuldigen Sie mein Grammatik, ich schätze, es ist von Schlafmangel :))
Also ... hat jemand eine Lösung gefunden, damit das unter Safari funktioniert? Denn das ist keine praktikable Lösung, da es unter Safari nicht funktioniert, einem wichtigen Browser.
Kann ich das auf ein Div anwenden? Es funktioniert gut, aber ich möchte das Scrollen nur für ein Div und nicht für die ganze Seite. Bitte helfen Sie :)
Ersetzen Sie einfach html,body durch das Div, das Sie scrollen möchten
Funktioniert nicht mit dem neuesten Firefox 10.0.2
Vielen Dank, ich suche nach einer Möglichkeit, mein Design zu implementieren.
Brandneu im Code und ich möchte das in meinen Blog/Website einfügen – wo soll ich es einfügen?
:/
Danke!
Hallo, der Code funktioniert einwandfrei!
Aber hat jemand eine Lösung gefunden, damit diese Funktionalität auf einem iPad, iPhone oder ähnlichen Touch-Geräten funktioniert?
Prost!
Selbst die Demo auf dieser Seite funktionierte in Firefox 10 nicht?!
Hallo, das ist genau das, wonach ich gesucht habe, aber ich bin ziemlich neu in HTML, wo soll ich den Code einfügen?
$(function() {
$(“html, body, *”).mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
this.scrollRight -= (delta * 30);
event.preventDefault();
});
});
Hey, wenn du neu in HTML bist, ist das wahrscheinlich viel zu fortgeschritten für dich. Vor allem, da es sich hier um Jquery und nicht um HTML handelt.
Funktioniert super! Danke für den Code!
$(“body,html”) Funktioniert wie ein Charme in allen Browsern, neueste FF, Safari, Chrome, IE 7,8,9 (win7)
wunderschön, danke.
Funktioniert nicht in Firefox 13.0.1 unter WINx64
Tolle Sache, sehr nützlich für ein Nebenprojekt von mir (Fotografie-Website) – also habe ich auch darüber gebloggt: http://bit.ly/MD6NHK
Danke Edd, das hat für mich perfekt funktioniert.
http://www.designedbyaturtle.co.uk/2012/horizontal-scrolling-with-jquery/
Hallo
Das funktioniert fast perfekt – habe aber einen kleinen Fehler entdeckt. Es scheint, dass, wenn Ihr Inhalt nicht die gesamte Höhe der Seite ausfüllt (und warum sollte er das, wenn Sie horizontales Scrollen wünschen), es einen bestimmten Teil der Seite am unteren Rand gibt, wo das Scrollen fehlschlägt, wenn Sie ganz zum anderen Ende scrollen – mit anderen Worten, wenn Sie vom ursprünglichen Viewport wegscrollen, stoppt das Scrollen an diesem unteren Teil der Seite, der keinen Inhalt hat.
Könnte es etwas mit dem Viewport zu tun haben? Selbst wenn HTML und Body in der Anfangsansicht beide height: 100% haben, schlägt vielleicht die 100% fehl, wenn man von der „ersten Ansicht“ wegscrollt?
Getestet auf OS X Chrome, Safari neueste Versionen.
Tatsächlich ein Problem. Ich erlebe es auch mit den Multicolumn-Layouts von CSS3.
Das Problem ist, dass die Spalten nicht von oben nach unten gefüllt sind, so dass, sobald man den ersten „Viewport“ verlässt (nach rechts scrollt), wo die Höhen wirklich 100% betragen, die Seite stoppt zu scrollen, wenn man nicht über Text in einer Spalte schwebt.
Dies verursachte auch ein Problem mit Hintergründen jenseits des anfänglichen Viewports. Aber das ist nicht mit dem Scrollen verbunden (nur mit der aktuellen Implementierung von Multicolumn).
Ich erlebe dieses Problem auch in Verbindung mit CSS3 Multicolumn-Layouts. Es scheint, dass das Scrollen mit dem Mausrad nicht funktioniert, wenn der Cursor sich zwischen den Spalten befindet. Dieses Problem habe ich im aktuellen Chrome (28) bemerkt. Im aktuellen Firefox (22) tritt dieses Problem nicht auf.
Ich untersuche derzeit, warum dieses Problem mit dem jQuery nicescroll-Plugin nicht auftritt. (Das ich aus anderen Gründen nicht verwenden kann)
Hat jemand das schon gelöst?
Funktioniert nicht unter OSX Safari und Chrome. Habe alle obigen Korrekturen ausprobiert, aber ohne Erfolg.
Hallo – ich wollte Sie informieren, dass dieses Snippet nicht mehr funktionsfähig ist. Sie verlinken auf das aktuellste Javascript, aber das Mausrad-Plugin ist veraltet.
Vielleicht sollten Sie für zukünftige Snippets die aktuellen Versionen der verschiedenen Skripte angeben? (Ich bin kürzlich auf dasselbe Problem gestoßen, dass eine Website kaputtging, weil mein altes JS nicht mit der neuesten jQuery-Version funktionierte)
Danke für die großartige Seite!
Ich weiß nicht, ob das die beste Option ist, aber es funktioniert bei mir. Wenn Sie Ihr Div anzeigen, laden Sie das Skript für „normales Scrollen“. Es ist dasselbe Skript wie für horizontales Scrollen, Sie müssen nur „this.scrollLeft -= (delta * 30);“ in „this.scrollTop -= (delta * 30);“ ändern.
Hallo Chris, ich wollte dich darauf hinweisen, dass dieses Snippet nicht mehr funktionsfähig ist. Du verlinkst auf das aktuellste Javascript, aber das Mausrad-Plugin ist alt.
Vielleicht solltest du für zukünftige Snippets die aktuellen Versionen der verschiedenen Skripte vermerken? (Ich bin kürzlich auf dasselbe Problem gestoßen, dass eine Website kaputtging, weil mein altes JS nicht mit der neuesten jQuery-Version funktionierte)
Danke für die großartige Seite!
Funktioniert bei mir in Chrome 21 ab dem Tag dieser Kommentierung hervorragend. Das Mausrad-Plugin ist ebenfalls die neueste Version.
Es funktioniert auch bei mir einwandfrei!
Funktioniert das auch für ein Element wie ein Div anstelle des Bodys?
Danke, dass Sie dies möglich und sehr einfach für einen Neuling wie mich gemacht haben. Das Plugin funktioniert perfekt auf meiner Website. Das einzige Problem ist, wenn man die Seite über einen Mac mit seinem horizontalen Scrollpad (durch horizontales Ziehen mit zwei Fingern) aufruft, es sich etwas seltsam anfühlt, wenn man vertikal scrollen muss, um etwas Horizontales zu bewegen. Gibt es eine Möglichkeit, das horizontale Scrollen ebenfalls funktionieren zu lassen?
preventDefault hat es getan! Vielen Dank!
Weiß jemand, wie man das Plugin nur für Touchpads deaktiviert?
Beim Navigieren mit dem Touchpad treten Konflikte zwischen horizontaler und vertikaler Bewegung auf.
Wenn ich mit dem Touchpad navigiere, finde ich dieses Plugin überhaupt nicht nützlich, daher wäre es perfekt, es zu deaktivieren, wenn speziell auf diese Weise navigiert wird, und nur für das Mausrad zu funktionieren.
Kann mir jemand helfen?
Hallo Leute, ich habe eine Lösung für Chrome gefunden.
Sie müssen sicherstellen, dass in Ihrem CSS nichts wie folgt vorhanden ist:
overflow-y: hidden;
overflow-x: auto;
Ich gehe davon aus, dass, wenn Sie keinen Inhalt entlang der Y-Achse haben, das Plugin dies für Sie erledigt.
Habe gerade eine komplett horizontale Website gestartet und einige Infos von hier verwendet, um zu helfen ... zumindest in den frühen Phasen ... Der Code hat sich etwas verändert. Danke.
Ich habe es geschafft, die Seite und die Unterseiten darin komplett nach links wachsen zu lassen, indem ich inline-block, white-space:none und font-size:0 verwendet habe.
Schauen Sie es sich an http://www.longbay.co.nz
Beste Grüße
Und ... Ähm ja, 12 Monate später und ein neuer Marketingmanager beschließt, die gesamte Website in eine Vorlagen-WordPress-Site umzubauen. Wir haben hart daran gearbeitet, eine sehr nutzbare horizontale Website zu erstellen, die den Kunden und der Branding-Agentur gefiel und über ein großartiges Umbraco CMS verfügte, das für einen modularen horizontalen Ansatz angepasst war.
Für alle, die Probleme hatten – probieren Sie das
function mouseWheel(event) {
var delta = 0;
if ( ! event) event = window.event;
if (event.wheelDelta)
delta = event.wheelDelta / 120;
else if (event.detail)
delta = -event.detail/3;
if (delta)
jQuery(window).scrollLeft(jQuery(window).scrollLeft()-Math.round(delta*100));
}
if (window.addEventListener)
window.addEventListener(‘DOMMouseScroll’, mouseWheel, false);
window.onmousewheel = document.onmousewheel = mouseWheel;
An Chris – Das weißt du schon – Aber tolle Tricks, die du hast. Danke.
Wenn ich unter Chrome horizontal scrollen möchte, halte ich einfach die Umschalttaste gedrückt, während ich das Mausrad verwende. Nach unten bewegt sich nach rechts, nach oben bewegt sich zurück.
Ich versuche, dies in einem einzigen Div zum Laufen zu bringen, oder besser gesagt, wenn (top > 1400). Im Wesentlichen nach unten scrollen, auf das betreffende Div treffen – dann horizontal scrollen.
Dies führt jedoch entweder dazu, dass die Elemente weiter oben auf der Seite durch einen rechten Rand beim Scrollen nach unten verdeckt werden, oder es deaktiviert das Scrollen vollständig.
Ich habe versucht
$(function(){ $("#art").wrapInner(""); $("#info").wrap(""); $("#info").mousewheel(function(event, delta) { if (top > 1400) { this.scrollLeft += (delta * 30); event.preventDefault();} else { event.Default();} }); });Ich weiß, dass das unordentlich ist, ich habe auf verschiedene Weise herumgefummelt, um das zum Laufen zu bringen.
Das ist großartig, danke
Ich glaube nicht, dass das für Webseiten üblich ist
danke
Ich habe es für euch –
Das funktioniert in allen aktuellen Browsern (zumindest auf dem Desktop)
Selbst deine Demo funktioniert nicht.
Es funktioniert bei mir. Ich werde das jetzt erstmal vergraben. Wenn Sie Daten bereitstellen können, wo/wie es nicht funktioniert, werde ich es wieder ausgraben.
Chris‘ Code funktioniert nicht unter Firefox. Ich gehe davon aus, dass du dich darauf beziehst?
Mein obiger Code funktioniert in allen Browsern.
Hallo,
Das ist großartig, danke.
Allerdings ist der Link zum Plugin oben defekt. Sie könnten versuchen, auf das GitHub-Projekt unter https://github.com/brandonaaron/jquery-mousewheel zu verlinken.
Ich hoffe, das hilft.
Hallo,
ich habe ein Problem bei der Verwendung dieses Snippets.
http://thomas-boecker.net/ — in den Lücken zwischen den Bildern (Margin) funktioniert das Skript nicht und es passiert nichts, wenn ich scrolle.
Hat jemand eine Idee, wie ich das beheben kann?
Vielen Dank!
Hallo Philipp,
Eine Lösung ist, statt margin padding-right: 25px; zu verwenden.
Ich hoffe, das hilft.
A
Verrückt, kurz bevor ich hier gefragt habe, habe ich schon Padding versucht und es funktionierte nicht.
Vielen Dank, jetzt funktioniert es! Digitaler Voodoo!
Hehe… Ist es nicht? :)
Gute Arbeit!
Ah, ich bin es wieder. Hilfe.
Das Umschalten von Margin auf Padding funktionierte in Chrome, aber in Safari sind die leeren Stellen immer noch tote Zonen für das Skript :(.
Haben Sie versucht, das Skript an Ihr #media wrapper Div zu binden?
Z.B.
$(‘#media’).scrollLeft( scroll – ( deltaY * 100 ) );
Sehr nett. Danke
Hallo Leute. Weiß jemand, wie man mit dem Mausrad einen sanften horizontalen Scroll ermöglicht?
Netter Trick, ich liebe diese Seite!
Was übersehe ich hier?
Firebug Konsole
getestet in FF und Chrome
Jede und jede Hilfe wird geschätzt!
Update
Habe es zum Laufen gebracht, indem ich Kevins (Januar 2013 Kommentar) Seitenquelltext verwendet habe
http://www.designedbyaturtle.co.uk/2012/horizontal-scrolling-with-jquery/
Das Beispiel funktioniert nicht
Bei mir funktioniert es, daher werde ich das hier begraben, bis Sie weitere Informationen darüber liefern können, wie genau es nicht funktioniert. Browser/Plattform/Version + Screencast wären ideal.
Hallo, danke für das Skript, aber es funktioniert nicht in Firefox. Ich benutze Firefox Version 24+. Das Skript funktioniert gut in Chrome, aber nicht in Firefox mit Mausrad-Scrolling, aber die Tastaturpfeile funktionieren, um die Seite nach links/rechts zu bewegen.
Tut mir leid, aber in Firefox 17.0.9 scrollt nichts. Irgendwelche Vorschläge?
Für FF müssen Sie "DOMmouseScroll" verwenden, MDN-Dokumente hier
https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll
Werfen Sie auch einen Blick auf meine Lösung, bei der ich die Browserunterstützung in Zeile 7 hier hinzugefügt habe
https://jsfiddle.net/JOEHOELLER/442LpLe5/3/
”’
var mousewheelevt = (/Gecko\//i.test(navigator.userAgent)) ? “DOMMouseScroll” : “mousewheel”;
”’
Hallo Leute, gibt es eine Möglichkeit, es mit overflow-x zum Laufen zu bringen? Ich möchte, dass meine Galerie sowohl mit meiner benutzerdefinierten Scrollleiste als auch mit dem Mausrad scrollt und ich versuche, sie tagelang ohne Erfolg zum Laufen zu bringen..
Hallo Leute,
Ich habe einen Weg gefunden, es sowohl unter Windows als auch unter Mac OS X zum Laufen zu bringen, indem ich einfach den Wert '30' in 'event.deltaFactor' geändert habe, so
funktioniert nur im Webkit-Browser, funktioniert nicht in Firefox
Ich denke, das ist keine optimale Lösung, denn wenn Sie ein Trackpad haben und von links nach rechts oder von rechts nach links scrollen, ist das Scrollen nicht flüssig. Es scheint eine Lösung zu sein, um eine vertikale Scrollbewegung zu einer horizontalen zu machen, aber sie verursacht Probleme, wenn Sie horizontal scrollen…
Stefan, dasselbe Problem hier – hast du es irgendwie gelöst? Oder die Idee einfach aufgegeben?
Ich versuche, dies zusammen mit einer Karte zu verwenden, die mit der Esri API erstellt wurde – es scheint einen Konflikt in den Bibliotheken zu geben – hat jemand Erfahrung damit? Schauen Sie sich diesen JS Fiddle an: http://jsfiddle.net/bretwhiteley/x8h2j2zf/1/
Siehe meine funktionierende Lösung mit Mausrad auch hier http://englishextra.github.io/pages/tests/tests_ege_news.html
@Tyler
— Oh ja. Das stört mich auch – Firefox und IE10 zumindest – sie kommen damit zurecht, aber nicht Chrome und Opera, die jetzt Webkit-basiert sind.
Ich musste nur eine kleine Anpassung vornehmen, denn in meinem Fall wollte ich scrollen, wenn das Ereignis nur über dem Element war
Ok, meine letzten Anpassungen am Originalcode, der unter IE9, Chrome, Firefox für PC funktioniert.
Und Chrome, Firefox, Safari unter MAC.
Wenn ein Fehler auftritt, bitte Bescheid geben…
funktioniert nicht in Chrome unter Win 7 und Win 8.1
Hallo! Hat jemand einen Code, mit dem das Skript je nach Fenstergröße aktiviert oder deaktiviert werden kann?
Danke!
if(window.width() > 1024) {
//INIT-CODE HIER EINFÜGEN
}
nur zur Korrektur, Joe. Sie können window.outerWidth (eine Eigenschaft, keine Methode) verwenden oder – mit jQuery – $(window).width().
Aber mit window.outerWidth stellen Sie sicher, dass der Wert mit CSS-Medienabfragen übereinstimmt.
Es funktioniert nicht in IE11 auf Win8.x Touchscreens. Hat jemand eine Lösung?
Möglicherweise, weil das Mausrad-Ereignis nur ausgelöst wird, wenn das "Mausrad" verwendet wird. Ich denke, für Touch sollten Sie touchmove oder etwas Ähnliches verwenden. (Internet Explorer hat einige Präfix-Ereignisse dafür wie MSTouchMove, wie Sie hier sehen können https://msdn.microsoft.com/en-us/library/dn304886(v=vs.85).aspx ).
Ich habe meine eigene in Vanilla JS geschrieben und sogar eine Animation hinzugefügt ;)
Ich brauche unendliches Scrollen nach links mit 4 divs, die sich wiederholen und ohne Plugins. Bitte helfen Sie
Das Plugin ist großartig, das einzige, was ist, ich habe einen Teil meiner Website, wo ein Div mit viel Inhalt aufpoppt, und wenn das passiert, möchte ich vertikal nur innerhalb dieses Divs scrollen können. Irgendwelche Ideen???
Sie müssen den Mausrad-Plugin-Link wirklich korrigieren, der Link ist falsch, sodass niemand ihn herunterladen kann, was diesen Beitrag ziemlich nutzlos macht :(
Ich sehe dies als eine gute Herausforderung für Sie, das Programmieren zu lernen. Hören Sie auf, SODD (Stack Overflow Driven Development) zu machen.
Die Vanilla-Lösung ist ziemlich einfach
var divToScroll = document.getElementById(‘scrollDiv’);
divToScroll.onscroll = function( ) {
//lesen und lernen
// https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX
}
Hallo Leute, wenn Sie es für ein einzelnes / spezifisches Element (Div oder etwas anderes) zum Laufen bringen wollen, hier ist es
$(document).ready(function(){
$(‘#gallery’).mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
Hallo Leute
Ich scheine der Einzige zu sein, der das Problem hat, dass mit jedem Code, den ich bekomme, der TypeError: undefined is not a function (evaluating ‘$(“body”).mousewheel(function(event, delta) { …’ auftritt
Wenn ich die Demo in meinem Browser öffne, funktioniert es, aber in meinem Code nicht.
Was kann ich tun, um das zu vermeiden?
Es scheint ein paar Probleme mit dieser Option zu geben, wenn Sie ein bestimmtes Element auf der Seite anvisieren möchten, ohne dass sich der Rest des Bildschirms verschiebt.
Wenn ich dies als Alternative gefunden habe, für alle, die interessiert sind
Fiddle: http://jsfiddle.net/tovic/GuaHC/?utm_source=website&utm_medium=embed&utm_campaign=GuaHC
Quelle: http://www.dte.web.id/2013/02/event-mouse-wheel.html
Gern geschehen…
Hallo,
Gibt es eine Option, mit der wir die erste Zeile oder den ersten Tag als feste Position verwenden können, aber horizontal scrollen können, und alle Tags werden ebenfalls horizontal gescrollt, bis die Daten der Tags enden. Demo ist
http://codepen.io/anon/pen/LGoLGZ
Bitte helfen Sie…
Ich habe gerade den von Warren Nugent vorgeschlagenen Code aktualisiert, damit er tatsächlich scrollt
http://codepen.io/coddess/pen/GoadwV
Das ist eine sehr minimal saubere Implementierung, sehr gut :)
Hallo, wo soll ich den Code in die HTML-Datei einfügen oder eine neue Datei dafür erstellen, bitte sagen Sie es mir oder antworten Sie mir per E-Mail
Danke
Hallo,
Ich habe das Skript nicht für Text, sondern für Bilder verwendet, aber das funktioniert zur Hälfte, das heißt, es scrollt, aber an einem bestimmten Punkt hängt es.
Wo mache ich etwas falsch? Wie kann ich das Skript für Bilder verwenden?
Danke
Es funktioniert gut mit wenigen Bildern wie hier: http://www.nicolacolonna.com/
aber nicht für viele Bilder wie hier: http://www.nicolacolonna.com/b&wplaces.html
Können Sie mir helfen?
danke
Danke an den Entwickler und an jeden, der hier geholfen hat
Ich sollte eine Vanilla-JavaScript-Portierung davon erstellen, die Memoisation verwendet, damit keine Pixel-Tracking aufscrollen.
Weiß jemand, wie man Ankerlinks hinzufügt? Das heißt, auf einen Link klicken und es springt zum Inhalt.
delta gab NaN zurück, also musste ich diese Prüfung hinzufügen
Anscheinend hat Chrome 61 das kaputt gemacht. Irgendwelche Ideen zur Behebung? Hat meine Seite ruiniert! :(
Konzept
Erstellen Sie einen Bildschieberegler, der Bilder horizontal verschiebt, und modifizieren Sie ihn so, dass er anstelle von onclick aufscrollt.
Das funktioniert jetzt nicht mehr.
Ich habe das für Sie gemacht: Horizontales Scrollen mit Vanilla JavaScript + lodash, um fehleranfällige Schleifen zu vermeiden.
Demo
https://jsfiddle.net/JOEHOELLER/2ofxrp8d/3/
Aktualisierte Version zur Unterstützung von < 5 Elementen, im Gegensatz zu > 5, die vom Server oder JSON-Daten generiert werden können
https://jsfiddle.net/JOEHOELLER/xs1gndfc/5/
Vanilla JS + FP (Functional Programming) Version zur Behandlung mehrerer horizontaler Bildlaufleisten auf einer Seite. Verwenden Sie jedes Markup (HTML), das Sie möchten, fügen Sie einfach die CSS-Klassen hinzu.
https://jsfiddle.net/JOEHOELLER/442LpLe5/3/
Für Leute, die FP nicht verstehen (ich weiß, es ist schwierig), hier ist die ES5-Version, reines Vanilla JS, um mehrere horizontale Bildlaufleisten auf einer Seite zu behandeln. Funktioniert mit CSS-Klassen, sodass keine Refaktorisierung für CMS-Template-Engines oder minimale Refaktorisierung für Angular oder React erforderlich ist.
https://jsfiddle.net/JOEHOELLER/vw038gqz/1/
Es funktioniert nicht wie erwartet, weil es die horizontale Bildlaufleiste zusammen mit dem horizontalen Scrollen bewegt…
Ich weiß, dass dies ein sehr alter Beitrag ist, aber für das Protokoll, das Beispiel funktioniert nicht mehr in
FireFox (65.0.2)
Chrome (73.0.3683.75)
Auf MacOS.
Funktioniert jedoch in Safari (12.0.3).
Vertikales Scrollen funktioniert nach dem Ende des horizontalen Scrollens nicht. Bitte geben Sie mir eine Lösung.
Sehr altes Skript, funktioniert nicht mit modernen Frameworks
Funktioniert für mich, wundere mich, warum Leute sagen, dass es nicht funktioniert. Ich plane, dies zu verwenden, da es einfach und sauber ist. Ich frage mich, wie unmousewheel verwendet wird, gibt es Ideen?
Ich habe gerade eine reine JavaScript-Möglichkeit dafür entwickelt, die auch vertikales Scrollen behandelt.
https://gist.github.com/FelixLuciano/aee75b72d655f72b8d729615861d0147
Funktioniert bei mir auch nicht. Chrome und Edge aktuelle Version vom Tag des Kommentars.
Es geht nach rechts, aber auch nach unten. Beides gleichzeitig, es scheint fehlerhaft zu sein.
Funktioniert das noch? Ich bin gerade auf meinem Handy und kann es nicht sagen.
https://jsfiddle.net/JOEHOELLER/442LpLe5/3/
Hallo, sehr nützliche Anleitung, ich wollte wissen, ob es kompliziert ist, einen Parallax-Effekt auf horizontales Scrollen oder einen Vollseiten-Scrolling-Effekt mit Slide-Effekt zu erzielen.
Hallo Adrian,
Schauen Sie sich dieses Beispiel an
https://tympanus.net/Development/HorizontalSmoothScrollLayout/index5.html
Dies wurde mit Locomotive Scroll erstellt
https://locomotivemtl.github.io/locomotive-scroll/
Gibt es eine Möglichkeit, dies mit matchMedia zu kombinieren, um das horizontale Scrollen nur bei einer bestimmten Fenstergröße zu erhalten?
Sehr schöner Code für horizontales Scrollen, gibt es auch eine Methode für flüssigeres Scrollen??
Hallo, sehr nützliche Anleitung, ich wollte wissen, ob es kompliziert ist, einen Parallax-Effekt auf horizontales Scrollen oder einen Vollseiten-Scrolling-Effekt mit Slide-Effekt zu erzielen.