DIV bis ID scrollen @ tutorials.de: Tutorials, Forum & Hilfe

Sasser · 21.02.11 02:11

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!

spicelab · 21.02.11 06:30

Mit scrollIntoView() ist sowas möglich.

Sasser · 21.02.11 11:39

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

Und wie ermittle ich da die Position der ID?

**Quaese** · 21.02.11 13:16

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 · 21.02.11 13:43

Vielen Dank!

spicelab · 21.02.11 14:18

Zitat von Sasser

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

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

**Quaese** · 21.02.11 16:12

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

spicelab · 21.02.11 16:30

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/ob..._into_view.htm) lautet in wenigen Sekunden Tipparbeit für HTML und CSS dann eben so:

HTML-Code:

<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!

Sasser · 21.02.11 18:54

Nur ist das Problem nun immer noch das gleiche...

Die Browserleiste scrollt mit, wenn das DIV z.B. am Ende der Seite ist.

spicelab · 21.02.11 19:50

Zitat von Sasser

Nur ist das Problem nun immer noch das gleiche...

Die Browserleiste scrollt mit, wenn das DIV z.B. am Ende der Seite ist.

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

Sasser · 21.02.11 20:05

Wir haben uns also schon weiter oben falsch verstanden. Denn dies war oben bereits so gemeint. Es hatte nichts damit zu tun, dass ich keine Lust habe das Script anzupassen etc.

spicelab · 21.02.11 20:12

HTML-Code:

<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  document.getElementById('Absatz').scrollIntoView(true);
}
</script>
<style type="text/css">
h1 { margin:600px 0;}
.box {height:100px;border:thin solid #eee;overflow:auto;}
</style> 
</head><body>
<h1>test</h1>
<div class="box">
    <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="#" onclick="Test();return false;">Test</a></p>
</body></html>

Das Anhängsel return false im onclick-Event bewirkt, dass beim Aufruf der JS-Funktion Test() der Browser nicht zum Dokumentanfang springt, die komplette Seite von unten nach oben scrollt

Sasser · 21.02.11 20:27

Aah vielen Dank!

Genau so funktioniert´s nun einwandfrei!

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

div und scrollen

Scrollen mit IE

CSS Scrollen

scrollen

Scrollen

Stichworte

E-Mail:

Abonnieren Abbestellen