Scrollbaren DIV-Container bis zum Ende gescrollt anzeigen

[kurzmann]

Liebe Community,

eine Frage: ist es möglich einen horizontal scrollbaren DIV-Container so anzuzeigen, dass er "bis zum Ende gescrollt" dargestellt wird, also dass nach links gecrollt werden muss, um den restlichen Inhalt zu sehen? Ich hoffe die Frage ist nicht zu banal, aber ich finde hierzu einfach nix, vermutlich, weil ich falsch suche. Hier der (inhaltlich gekürzte) Code:

<div id="nome-scrolling-wrapper" class="scrolling-wrapper" style="height: 320px; text-align: right; margin-bottom: -20px; float: left; width: 58%;">
<div id="nomewrap" class="card" style="margin-right: 20px; display: none;">

…

</div>
<div class="card" style="margin-right: 20px;">

…

</div>
<div class="card" style="margin-right: 20px;">

…

</div>
</div>

.scrolling-wrapper {
      overflow-x: scroll; 
      overflow-y: hidden; 
      white-space: nowrap; 
      height: 400px;
      margin-right:-15px;
}

.card {
      display: inline-block;
}

Liebe Grüße, David

[Tabellenkalk]

Hallo,

eine Frage: ist es möglich einen horizontal scrollbaren DIV-Container so anzuzeigen, dass er "bis zum Ende gescrollt" dargestellt wird, also dass nach links gecrollt werden muss, um den restlichen Inhalt zu sehen?

Abgesehen von der zu stellenden Frage, ob man das rechts-links-Gescrolle nicht besser verhindern sollte, habe ich pageXOffset gefunden, wo etwas Ähnliches mit einer veralteten Funktion realisiert wurde. K.A. ob es Ersatz dafür gibt.

Gruß
Kalk

[kurzmann]

Vielen Dank schonmal, ja, das habe ich auch angemerkt, das war aber der ausdrückliche Wunsch des Seiteninhabers. Es geht um einen bildenden Künstler, der ganz genaue Vorstellungen von der Seite hat. Da habe ich trotz Einreden leider keinen Einfluss darauf.. Aber stimmt schon.

Ich check nur nicht ganz, wie der Code implementiert werden soll, damit das funktioniert, ich bin nicht wirklich sehr fit in Javascript.

<script>
function verschieben() {
  nome-scrolling-wrapper.scrollBy(100, 100);
}
verschieben();
</script>

müsste doch funktionieren? Oder gibt man da nicht die ID vom Container an? Der Code soll ohne Button-Druck, sondern beim Laden der Seite ausgeführt werden. Zur Info: Die Seite ist eine Wordpress-Seite.

Liebe Grüße

[Der Martin]

Hallo,

<script>
function verschieben() {
  nome-scrolling-wrapper.scrollBy(100, 100);
}
verschieben();
</script>

das wird so nichts!

Oder gibt man da nicht die ID vom Container an?

Doch, kann man im Prinzip machen. Aber deine ID enthält Bindestriche, die in einem Javascript-Ausdruck als Minus-Operator interpretiert werden. Da versagt diese Notation also.

Lösung: Entweder man verwendet getElementById(), oder man nutzt die Tatsache aus, dass globale Daten in Javascript in Wirklichkeit Eigenschaften des window-Objekts sind, und benutzt dann die Notation mit eckigen Klammern und dem Namen der Eigenschaft als String.

Dann klappt's auch mit dem Nachbarn. 😉

Live long and pros healthy,
 Martin

[kurzmann]

Du bist wohl der heilige Martin, das hat endlich geklappt :D

<script>
var nomecont = document.getElementById('nome-scrolling-wrapper');
function verschieben() {
  nomecont.scrollBy(1000, 0);
}
verschieben();
</script>

Vielen Dank, auch @Tabellenkalk, ihr habt mir viele Kopfschmerzen genommen.

Liebe Grüße, David

[Der Martin]

Hallo,

Du bist wohl der heilige Martin

na, wir wollen da mal nicht übertreiben! Ich bin ganz bestimmt nicht heilig, aber ebensowenig Unheilig. Ich habe nur im passenden Moment die passende Idee geäußert.

Vielen Dank, auch @Tabellenkalk, ihr habt mir viele Kopfschmerzen genommen.

Na dann wünsche ich weiter eine kopfschmerzfreie Zeit. 😀

Live long and pros healthy,
 Martin