Div per Javascript scrollen

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo, ich habe für ein rein horizontales Menü folgenden Code:

Die derzeitigen CSS-Eigenschaften sind wie folgt gesetzt:

#around\_menue {
 overflow: hidden;
 margin-left: 50px;
 margin-right: 50px;
}

#menue {
 overflow-x: scroll;
 overflow-y: hidden;
 white-space: nowrap;
 padding: 12px;
}

Der Inhalt des Menüs übersteigt die Breite eines Bildschirms und somit des Browsers und ebenso natürlich auch der Webseite. Deswegen kann man ihn scrollen. Das ganze soll jetzt etwas edler aussehen.

Dazu muss ich das Scrollen per Javascript kontrollieren. Die Scrolleiste soll dann verschwinden, sobald ich weiß, wie ich das mache.

Gibt es eine Möglichkeit, per JS zu sagen: Scrolle den Inhalt des Divs um 20 Pixel nach rechts?

Danke schon mal für jede Hilfe.

mfg Christoph

#2

Hallo omg,

Dazu muss ich das Scrollen per Javascript kontrollieren. Die
Scrolleiste soll dann verschwinden, sobald ich weiß, wie ich
das mache.

Gibt es eine Möglichkeit, per JS zu sagen: Scrolle den Inhalt
des Divs um 20 Pixel nach rechts?

das Element auf position:relative setzen
style.left-wert des Elementes um 20 verringern.
klappt auch in den minus-Bereich hinein.

Gruß
Klaus

#3

Guten Tag,

so mache ich das gerade auch. Beim äußeren Div setze ich overflow: hidden; und beim inneren overflow: visible; . Das innere schiebe ich dann nach rechts, bzw. nach links, um es so zu sagen zu scrollen. Das einzigst dumme dabei ist, dass ich nicht weiß, wann man ganz links und wann man ganz rechts angekommen ist.

#4

so mache ich das gerade auch. Beim äußeren Div setze ich
overflow: hidden; und beim inneren overflow: visible; . Das
innere schiebe ich dann nach rechts, bzw. nach links, um es so
zu sagen zu scrollen. Das einzigst dumme dabei ist, dass ich
nicht weiß, wann man ganz links und wann man ganz rechts
angekommen ist.

der left-wert wird ja in einer globalen variablen gehalten.

beim „verschieben“ nach links darf der left-wert ja nicht größer 0 sein
beim „verschieben“ nach rechts mit einem maximalen minus-wert vergleichen, der nicht unterschritten werden soll/darf

wäre natürlich einfacher, wenn für die divs die Breite festgelegt würde.
der maximale minus-wert könnte mit screen.width „angepasst“ werden

#5

der left-wert wird ja in einer globalen variablen gehalten.

Genau, so habe ich das z.Z. auch geregelt.

beim „verschieben“ nach links darf der left-wert ja nicht
größer 0 sein

Das würde ich nicht sagen. Ich will, dass man etwas Spielraum hat.

wäre natürlich einfacher, wenn für die divs die Breite
festgelegt würde.

Das geht leider nicht, sie ist abhängig von der Bildschirmbreite.

der maximale minus-wert könnte mit screen.width „angepasst“
werden

Genau, das dachte ich mich auch schon. Ein bisschen rechnen, dann hat man den genauen Zahlenwert. Aber leider nur für den Moment. Wenn der User bei kleinem Browserfenster ganz nach rechts scrollt und den Browser größer macht, habe ich ein Problem. Ich muss entscheiden, ob ich im nur Moment des versuchten Scrollens ein Prüfung durchführe, oder immer in kleinen Intervallen prüfe, ob der Bildschirm jetzt eine andere Breite hat und bei Bedarf nach links scrolle.

Ich werde das jetzt mal versuchen, mal sehen, was am Ende raus kommt.

mfg Christoph

#6

Ähm, mit screen.width kann es nicht funktionieren, man muss document.body.offsetWidth verwenden. Man kann ja schlecht von der gesamten Bildschirmbreite ausgehen.

mfg Christoph

#7

Problem gelöst
Gescrollt werden darf nach links, so lange diese Bedingung erfüllt ist: [derzeitiger Abstand nach links] (([Gesamtbreite des Menüs] - document.body.offsetWidth + [Seitenabstand des Menüs zur rechten und linken Fensterkante zusammen] + [Tolleranzwert]) * (-1))

Vielen Dank für die tolle Unterstützung, Klaus.

freundliche Grüße
Christoph

#8

Detailerklärung
Der Toleranzwert ist übrigens der Wert, den man das Menü weiter wandern lassen will, auch wenn dies technisch eigentlich nicht mehr nötig wäre. Das wirkt aber meiner Meinung nach besser. Ist man anderer Meinung, setzt man einfach den Zahlenwert 0 ein.

mfg Christoph

#9

Problem. Ich muss entscheiden, ob ich im nur Moment des
versuchten Scrollens ein Prüfung durchführe,

ist doch klar … in der function, die scrollen durchführt!!
dann wird mit der aktuellen breite gerechnet.

du könntest auch ein onresize-event einbauen.

Gruß
Klaus

#10

Ähm, mit screen.width kann es nicht funktionieren, man muss
document.body.offsetWidth verwenden. Man kann ja schlecht von
der gesamten Bildschirmbreite ausgehen.

klar … die Auflösung ist irrelevant
würde aber clientWidth bevorzugen, da W3C-konform
document.getElementById(‚around_menue‘).clientWidth

und …

der user dürfte bei mir bis ins nirvana scrollen :smile:)))