DIV bis ID scrollen

S

Sasser

Erfahrenes Mitglied
Guten Abend!

Ich habe ein scrollbares DIV mit mehreren Bildern untereinander. Jedes Bild hat eine ID.

Gibt es die Möglichkeit, das DIV bis zu einer bestimmten ID zu scrollen? Es soll jedoch nur das DIV bis zu dem Bild gescrollt werden, nicht jedoch der Browser.

Vielen Dank!
 
Damit scrollt man aber den kompletten Browser. Ich möchte aber nur das DIV scrollen.

Und wie ermittle ich da die Position der ID?
 
Hi,

ermittel über offsetTop und offsetParent die Abstände des inneren und äusseren Elements. Über die Eigenschaft scrollTop weist du dem äusseren Element die benötigte Scrollhöhe zu.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
#Absatz{
  height: 300px;
  overflow: auto;
  background: #efefef;
}
#Absatz p{
  padding: 0;
  margin: 0;
  height: 30px;
}
 //-->
</style>
<script type="text/javascript">
function Test(strId){
  var objOuter = document.getElementById("Absatz");
  var objInner = document.getElementById(strId);

  // Top-Offsets ermitteln
  var objOffset = {
    outer: getTopOffset(objOuter),
    inner: getTopOffset(objInner)
  };

  // Scroll-Höhe zuweisen (= Differenz der beiden Elemente)
  objOuter.scrollTop = (objOffset.inner-objOffset.outer);
}

// Funktion zum Ermitteln des Top-Offsets eines übergebenen Elements
function getTopOffset(objTest){
  var intOffset = objTest.offsetTop;
  var objParent = objTest.offsetParent;

  while(objParent){
    intOffset += objParent.offsetTop;
    objParent = objParent.offsetParent;
  }

  return intOffset;
}
</script>
</head>
<body>
<h1>Hallo Welt</h1>
<div id="Absatz">
  <script type="text/javascript">
    for(var i=1; i<100; i++){
      strInsert = (i%2==0)? " style=\"background: #efef00;\"" : "";
      document.write("<p id=\"zeile"+i+"\""+strInsert+">Zeile " + i + "</p>");
    }
  </script>
</div>

<div style="height: 1200px;">Höhen-Element</div>
<p><a href="javascript:Test('zeile50')">Test</a></p>
</body></html>
Ciao
Quaese
 
Sasser hat gesagt.:
Damit scrollt man aber den kompletten Browser. Ich möchte aber nur das DIV scrollen
Zum Vergrößern anklicken....
Na und? Die Methode lässt sich ebenso auf das von dir eingangs vorgegebene <div>-Element anwenden - pack hierzu einfach in dem Beispiel das <p id="Absatz">Ein Text</p> in ein <div>.

Hätte ich dir sonst diesen Vorschlag unterbreitet?

Aktives Mitdenken und -arbeiten wird vorausgesetzt, anstatt grundlose Einwände zu posten, ohne sich zuvor vergewissert zu haben, was tatsächlicher Stand der Dinge / Technik ist :rolleyes:
 
Zuletzt bearbeitet:
Hi,

es wird allerdings auch die Scrollposition im Browser verändert, wenn die von dir vorgeschlagene Variante verwendet wird.

So wie ich das Problem verstanden hatte, soll lediglich die Position im Element angepasst werden.

Ciao
Quaese
 
Nichts desto trotz empfinde ich es persönlich leider nur als geistig "engstirnig" bis "armselig", lieber mit so einem voreiligen unbegründeten / unqualifizierten Beitrag aufzuschlagen, anstatt, sofern dazu gewillt und/oder imstande, den Quellcode des Beispiels, der mit seiner eigenen HTML-Konstellation gewiß nicht auf seinen beschriebenen Anwendungsfall zutrifft, für die JS-Technik aber sowas von unerheblich ist, dahingehend abzuändern, dass das JavaScript in dem geforderten <div>, und nicht (mehr) unmittelbar in <body> zum Tragen kommt (wie auch in deinem gezeigten Code), womit sich hier nicht (mehr) unmittelbar im Browserfenster selbst die Scrollposition verändert.

Die angepasste Fassung des Beispiels (http://de.selfhtml.org/javascript/objekte/anzeige/all_scroll_into_view.htm) lautet in wenigen Sekunden Tipparbeit für HTML und CSS dann eben so:

HTML: 
<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  document.getElementById('Absatz').scrollIntoView(true);
}
</script>
<style type="text/css">
div.scrollBox {height:100px;border:thin solid #eee;overflow:auto;}
</style> 
</head><body>
<div class="scrollBox">
    <p id="Absatz">Ein Text</p>
    <script type="text/javascript">
        for (i = 1; i < 100; i++)
        document.write("<br>Zeile " + i);
    </script>
</div>
<p><a href="javascript:Test()">Test</a></p>
</body></html>

Die Preisfrage dieser Woche lautet demnach:

Welches Code-Fundstück aus'm Netz passt direkt und ohne jegliche Anpassungsarbeit(en) für den eigenen individuell zugeschnittenen Gebrauch?

Weidmanns Heil! Weidmanns Dank! :suspekt:
 
Zuletzt bearbeitet:
Nur ist das Problem nun immer noch das gleiche...

Die Browserleiste scrollt mit, wenn das DIV z.B. am Ende der Seite ist.
 
Sasser hat gesagt.:
Nur ist das Problem nun immer noch das gleiche...

Die Browserleiste scrollt mit, wenn das DIV z.B. am Ende der Seite ist.
Zum Vergrößern anklicken....
Nur, das eine (mehrere <img> innerhalb eines <div> scrollen) hat mit dem anderen (neben diesem <div> existiert weiterer umfangreicher Inhalt in <body>, was selbstverständlich und natürlich ein Scrollen des kompletten Dokument(körper)s im Browserfenster nach sich zieht) nix zu tun!

Von "dem gleichen Problem" kann somit hier kaum die Rede sein :rolleyes:
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück