Horizontal Div Scroll Smooth

html.de-Forum JavaScript
1

Hallo Leute,

ich habe auf meiner Website ein Div, welches horizontal gescrollt werden kann.
Damit der Benutzer mit dem Mausrad nach links und rechts scrollen kann, nutze ich das Script von:
https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.js
und folgendes Script, welches sich auf das Div (scrolldiv) bezieht:

<script type="text/javascript"> $(document).ready(function() { $('#scrolldiv').mousewheel(function(e, delta) { this.scrollLeft -= (delta * 80); e.preventDefault(); }); }); </script>

Leider sieht das Scrollen dabei sehr ruckelig aus. Habt ihr eine Lösung, wie man das besser machen könnte?
Problem ist, dass sämtliche „Smooth-Scrolling“ Skripte mit Anchors arbeiten (die ich gefunden habe), ich aber keine Anchors habe, sondern nur das Div entlang scrollen will.

Gruß mustang

2

Ich würde das scrollLeft in ein animate() packen.

3

Servus,
gute Idee, aber wie sieht das genau aus? Denn egal wie ich das in ein animate() schreibe, funktioniert es nicht mehr.

4

Wenn ich nicht irre musst du das .animate() an scrollLeft anhängen.
So etwa scrollLeft.animate()

Bin mit aber nicht wirklich sicher :wink:

5

Varianten, die ich jetzt probiert habe und leider nicht funktionieren:

this.scrollLeft.animate() -= (delta * 80); this.animate().scrollLeft -= (delta * 80); animate(this.scrollLeft -= (delta * 80););

6

Variante mit scrollTop:
https://jsfiddle.net/dfL94ayh/

7

Also müsste this.animate(scrollLeft -= (delta * 80)) reichen falls keine Eigenschaften angegeben werden oder liege ich falsch?

8

animate() erwartet ein Object, und es braucht außerdem einen Zeitwert zur Ausführung.
http://api.jquery.com/animate/

9

Also der Code:

$( "#left" ).click(function(){ $( "#scrolldiv" ).animate({ "left": "-=50px" }, "slow" ); });
funktioniert insofern nicht, da hier CSS-Eigenschaften geändert werden, ich ja aber das:

this.scrollLeft -= (delta * 80);

ausführen möchte.

Die Variante:

$('#scrolldiv').mousewheel(function(e, delta) { $( "#scrolldiv" ).animate(this.scrollLeft -= (delta * 80), "slow" ); e.preventDefault(); });
funktioniert zwar, hat aber genau das gleiche Ruckeln, wie schon am Anfang.
Und die ScrollTop-Funktion umschreiben hat am Ende das gleiche Ergebnis vom Code her und vom Aussehen.

10
11

Dieser Ansatz erscheint mir Erfolg versprechend:

$( "#scrolldiv" ).animate({ "left": "-=50px" }, "slow" );

Nur müsstest Du IMO scrollLeft animieren statt left, weil Du sonst die Position des div animierst:

$( "#scrolldiv" ).animate({scrollLeft: "-=50px"}, "slow" );
12

Funktioniert leider auch nicht. Gibts doch nicht…