overflow:auto mit Javascript realisieren?

[chrisz]

Hi zusammen,
kann man den css-Code overflow:auto bei einer Textarea durch Javascript-Code ersetzen? Ich möchte keine Scrollbalken in meinem Textfeld. Der Text soll aber trotzdem weiter scrollen, wenn ich während des Schreibens mit dem Cursor am Feldende bin.
Danke für alle Tips!
Grüße
Chriss

[LX]

Du hast zu diesem Ziel zwei Ansatzpunkte:

Einerseits kannst Du auch mit JavaScript auf das style-Attribut zugreifen und somit CSS-Eigenschaften beeinflussen.

Andererseits kannst Du mit der Eigenschaft scrollTop die Scrollhöhe eines Elements lesen und setzen.

Gruß, LX

[chrisz]

Du hast zu diesem Ziel zwei Ansatzpunkte:

Einerseits kannst Du auch mit JavaScript auf das style-Attribut zugreifen und somit CSS-Eigenschaften beeinflussen.

Andererseits kannst Du mit der Eigenschaft scrollTop die Scrollhöhe eines Elements lesen und setzen.

Gruß, LX

Das hört sich gut an. Ich hab auch schon mal mit ScrollTop experimentiert, aber es hatte nicht so richtig geklappt. Wie kann ich das anstellen, hast du mal ein Beispiel?
Grüße
Chriss

[molily]

Ich hab auch schon mal mit ScrollTop experimentiert, aber es hatte nicht so richtig geklappt.

Die Frage ist, welche Logik willst du damit umsetzen? Ich wüsste nicht, wie du bei einer Textarea die Scrollbarkeit mit JavaScript emulieren willst. Du kannst natürlich beim keypress das scrollTop auf scrollHeight setzen. Dann wird immer nach ganz unten gescrollt. Wichtig wäre aber, die Cursorposition zu berücksichtigen. Was macht man denn, wenn man mit dem Cursor wieder an den Anfang zurück will? Dann darf das Script nicht einfach den Bildausschnitt ans Ende setzen. Es ist nicht so einfach, herauszubekommen, auf welcher Höhe gerade der Cursor steht und den sichtbaren Ausschnitt entsprechend anzupassen. (Ich wüsste auf Anhieb gar nicht wie.) So eine Erkennung wäre browserübergreifend nur schwer möglich und müsste sehr intelligent programmiert werden. Ehrlich gesagt sehe ich keinen Sinn in deinem Vorhaben, ein im Browser bereits vorhandenes Feature mehr schlecht als recht mit JavaScript nachzuprogrammieren. Was hast du eigentlich vor? Warum willst du den Scrollbalken deaktivieren? Welchen Nutzen erhoffst du dir dadurch?

Mathias

[LX]

(...) Welchen Nutzen erhoffst du dir dadurch?

Eine berechtigte Frage. Wenn Du den Scrollbalken nur optisch unterbinden willst, kannst Du ihn auch standardmäßig aktivieren und mit overflow:hidden in den Begrenzungen eines divs verstecken (Achtung: unterschiedliche Breite der Scrollbalken bei verschiedenen Browsern beachten).

Gruß, LX

[Chriss]

hi zusammen»» (...) Welchen Nutzen erhoffst du dir dadurch?

Eine berechtigte Frage. Wenn Du den Scrollbalken nur optisch unterbinden willst, kannst Du ihn auch standardmäßig aktivieren und mit overflow:hidden in den Begrenzungen eines divs verstecken (Achtung: unterschiedliche Breite der Scrollbalken bei verschiedenen Browsern beachten).

Gruß, LX

Ja, das soll nur optisch sein. Ich habe es aber bis jetzt noch nicht hinbekommen den Scrollbalken zu verstecken. Damit es funktioniert, müsste ich overflow:auto nehmen, da bei overflow:hidden der Firefox nicht weiter scrollt. Wie könnte das klappen mit dem Verstecken?
Grüße
Chriss

[chrisz]

Ich hab auch schon mal mit ScrollTop experimentiert, aber es hatte nicht so richtig geklappt.

Die Frage ist, welche Logik willst du damit umsetzen? Ich wüsste nicht, wie du bei einer Textarea die Scrollbarkeit mit JavaScript emulieren willst. Du kannst natürlich beim keypress das scrollTop auf scrollHeight setzen. Dann wird immer nach ganz unten gescrollt. Wichtig wäre aber, die Cursorposition zu berücksichtigen. Was macht man denn, wenn man mit dem Cursor wieder an den Anfang zurück will? Dann darf das Script nicht einfach den Bildausschnitt ans Ende setzen. Es ist nicht so einfach, herauszubekommen, auf welcher Höhe gerade der Cursor steht und den sichtbaren Ausschnitt entsprechend anzupassen. (Ich wüsste auf Anhieb gar nicht wie.) So eine Erkennung wäre browserübergreifend nur schwer möglich und müsste sehr intelligent programmiert werden. Ehrlich gesagt sehe ich keinen Sinn in deinem Vorhaben, ein im Browser bereits vorhandenes Feature mehr schlecht als recht mit JavaScript nachzuprogrammieren. Was hast du eigentlich vor? Warum willst du den Scrollbalken deaktivieren? Welchen Nutzen erhoffst du dir dadurch?

Mathias

Ich habe einen ganz minimalistischen Webstyle, deshalb möchte ich keinen Scrollbalken. Des weiteren soll die Seite mit allen Betriebssystemen gleich aussehen. Mir ist bewusst, dass ich damit eine Einbuße an Komfort in Kauf nehme, aber ich habe nur ein Kontaktfenster, und brauche den Scrollbalken nicht unbedingt.
Mit dem Code klappt dass ganz gut, wenn ich die Funktion mit dem Event-Handler "onkeydown" verknüpfe. Aber wie du sagst, wenn ich am Anfang noch nachträglich Text einfügen will, springt der natürlich dann auch ans Ende. Kann man das noch irgendwie ausbauen?

``
window.onkeydown = function(){
        scrollBox();
}
</script>
}

[JürgenB]

Hallo chrisz,

... Des weiteren soll die Seite mit allen Betriebssystemen gleich aussehen. ...

hast du schon mal darüber nachgedacht, wieviele Besucher einen PC mit Vista, einen mit XP, einen mit Linux und einen MAC auf ihrem Schreibtisch stehen haben und dann auch noch prüfen ob deine Seite auf allen Systemen pixelganau gleich aussieht?

Jede System-Browserkombination hat ihre Eigenarten, die beim Layout möglicherweise berücksichtigt werden müssen, aber warum soll es in allen Kombinationen exakt gleich aussehen?

Gruß, Jürgen

[Chriss]

hi zusammen»» Hallo chrisz,

... Des weiteren soll die Seite mit allen Betriebssystemen gleich aussehen. ...

hast du schon mal darüber nachgedacht, wieviele Besucher einen PC mit Vista, einen mit XP, einen mit Linux und einen MAC auf ihrem Schreibtisch stehen haben und dann auch noch prüfen ob deine Seite auf allen Systemen pixelganau gleich aussieht?

Das ist mir klar, das das wohl nicht 100%-ig gehen wird. Die Scrollbalken, Buttons usw. sollen aber ein neutrales Aussehen unabhängig vom verwendeten Betriebssystem haben.
Gruß
Chriss

[JürgenB]

Hallo Chriss,

... Die Scrollbalken, Buttons usw. sollen aber ein neutrales Aussehen unabhängig vom verwendeten Betriebssystem haben.

dann besteht aber die Gefahr, dass der Besucher sie nicht mehr als solche erkennt. Und noch schlimmer finde ich, dass auf vielen (allen?) Seiten mit selbstgebastelten Scrollbalken die "größte Erfindung" nach der grafischen Oberfläche, das Scrollrad, nicht mehr funktioniert.

Gruß, Jürgen

[Chriss]

hi zusammen»» Hallo Chriss,

... Die Scrollbalken, Buttons usw. sollen aber ein neutrales Aussehen unabhängig vom verwendeten Betriebssystem haben.

dann besteht aber die Gefahr, dass der Besucher sie nicht mehr als solche erkennt.Und noch schlimmer finde ich, dass auf vielen (allen?) Seiten mit selbstgebastelten Scrollbalken die "größte Erfindung" nach der grafischen Oberfläche, das Scrollrad, nicht mehr funktioniert.

Eine Alternative wäre auch noch overflow:auto und den Scrollbalken zu verstecken. Aber wie gesagt, hab ich bis jetzt noch nicht hinbekommen.
Gruß
Chriss

[molily]

Ich habe einen ganz minimalistischen Webstyle, deshalb möchte ich keinen Scrollbalken. Des weiteren soll die Seite mit allen Betriebssystemen gleich aussehen. Mir ist bewusst, dass ich damit eine Einbuße an Komfort in Kauf nehme, aber ich habe nur ein Kontaktfenster, und brauche den Scrollbalken nicht unbedingt.

Formularfelder sind nicht umsonst nur beschränkt formatierbar. Das dient nicht dem Ärgern von Screendesignern, sondern der Benutzbarkeit des Webs für den Surfer. Wenn die die Bedienbarkeit solcher wichtigen Elemente beschneidest, musst du dich irgendwann nicht wundern, wenn du keine Nachrichten über das Kontaktformular bekommst, weil es nicht browserübergreifend so funktioniert, wie es die Webseitenbesucher gewohnt sind.

Mit dem Code klappt dass ganz gut, wenn ich die Funktion mit dem Event-Handler "onkeydown" verknüpfe. Aber wie du sagst, wenn ich am Anfang noch nachträglich Text einfügen will, springt der natürlich dann auch ans Ende. Kann man das noch irgendwie ausbauen?

Klar, wenn du wie gesagt einen Ansatz findest, um auf die Cursorposition zu reagieren. Es dürfte einfach sein, zu prüfen, ob der Cursor am Ende steht oder nicht, aber "Hochscrollen" nachzubilden dürfte schwierig sein. Um von der Cursorposition auf den sichtbaren Ausschnitt zu schließen, müsste viele Variablen bekannt und unveränderlich sein, was nicht der Fall ist. Es ginge vermutlich einfacher in einem Element mit designMode/contentEditable, aber das ist ein riesiges Fass.

Ernsthaft, lass es einfach. Da verschwendest du Mühen, um letztlich herauszufinden, dass es keine zufriedenstellende technische Lösung gibt.

Mathias