✔ Innerhalb eines DIVs zu Element mit bestimmter ID springen

M

Michael_K

Mitglied
Hallo!

Ich habe hier mehrere Listen, von denen jedes einzelne Listenelement eine individuelle ID besitzt. Diese Listen liegen in einem div-Container mit einer bestimmten Maximalhöhe, durch overflow: auto wird ein Scrollbalken eingeblendet, sobald die Listen zu lang für den Container werden. So sieht's vereinfacht aus:
Code: 
<div id="listScrollable">
<ul>
<li id="li_1"><a href="index.php?id=1">Link 1</a></li>
<li id="li_2"><a href="index.php?id=2">Link 2</a></li>
<li id="li_3"><a href="index.php?id=3">Link 3</a></li>
<li id="li_4"><a href="index.php?id=4">Link 4</a></li>
</ul>
<ul>
<li id="li_5"><a href="index.php?id=5">Link 5</a></li>
<li id="li_6"><a href="index.php?id=6" class="current">Link 6</a></li>
</ul>
</div>
Code: 
#listScrollable {
max-height: 600px; 
overflow: auto;
}

.current {
font-weight: bold;
}
Der aktuell besuchte Link wird durch die Klasse current hervorgehoben. Mein Problem ist nun, dass ich sicherstellen möchte, dass der aktuelle Link immer im sichtbaren Bereich von #listScrollable liegt, auch wenn die Listenelemente, die über .current liegen, zusammen bereits höher als die 600 Pixel Maximalhöhe sind. In diesem Fall sollte die Liste also von selbst so weit nach unten springen, dass der entsprechende Link am besten direkt an erster Stelle zu sehen ist.

Ganz banal ist das zwar machbar, wenn ich einfach die entsprechende ID des Listenelements an die URL anhänge:
Code: 
index.php?id=6#li_6
Dabei springt jedoch auch das gesamte Browserfenster nach unten, sodass #listScrollable direkt am oberen Rand des Fensters beginnt und alles, was darüberliegt, erst durch Hochscrollen wieder sichtbar wird.

Am liebsten wäre mir ja, das Ganze ohne Javascript zu lösen, aber das scheint kaum möglich sein. Auf Javascript-Basis habe ich zwar viele Lösungen gefunden, die das bloße Scrollen innerhalb eines divs mit overflow:auto ermöglichen - aber meine Suche nach einer Lösung, die innerhalb eines solchen divs zu einer bestimmten ID springen kann, verlief auch erfolglos.
Hat hier vielleicht jemand einen Tipp?

Viele Grüße
Michael
 
Hi,

du könntest die vertikalen Offsets (offsetTop, offsetParent) vom Holderelement (listScrollable) und dem aktiven Listenelement ermitteln. Die Differenz der beiden Werte weist du der scrollTop-Eigenschaft des Holderelements 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">
<script type="text/javascript">
<!--
function setOffset(objElem, objHolder){
  var intOffY1 = objElem.offsetTop;
  var objHelp1 = objElem.offsetParent;

  while(objHelp1){
    intOffY1 += objHelp1.offsetTop;
    objHelp1 = objHelp1.offsetParent;
  }

  var intOffY2 = objHolder.offsetTop;
  var objHelp2 = objHolder.offsetParent;

  while(objHelp2){
    intOffY2 += objHelp2.offsetTop;
    objHelp2 = objHelp2.offsetParent;
  }

  objHolder.scrollTop = intOffY1 - intOffY2;
}
//-->
</script>
<style>
#listScrollable {
  height: 200px;
  overflow: auto;
  border: 1px solid #000;
  background: #fff;
}
#listScrollable li{
  height: 60px;
}

.current {
  font-weight: bold;
}
</style>
</head>
<body>
<button onclick="setOffset(document.getElementById('li_4'), document.getElementById('listScrollable'));">li_4</button>
<div id="listScrollable">
  <ul>
    <li id="li_1"><a href="index.php?id=1">Link 1</a></li>
    <li id="li_2"><a href="index.php?id=2">Link 2</a></li>
    <li id="li_3"><a href="index.php?id=3">Link 3</a></li>
    <li id="li_4"><a href="index.php?id=4" class="current">Link 4</a></li>
  </ul>
  <ul>
    <li id="li_5"><a href="index.php?id=5">Link 5</a></li>
    <li id="li_6"><a href="index.php?id=6">Link 6</a></li>
  </ul>
</div>
</body>
</html>

Edit: Funktionalität überarbeitet.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück