PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Gegenstück zu document.body.scrollTop


Geldmann3
2012-06-23, 13:42:06
Hallo, mit document.body.scrollTop kann ich mir in JS anzeigen lassen, wie weit der Benutzer vom obersten Teil der Seite entfernt ist. Nun möchte ich aber wissen, wie weit er vom untersten Teil entfernt ist, die Seitenhöhe ist dynamisch. Gibt es ein Scroll.Bottom oder einen Trick, oder muss ich das Ganze mit einem Javascript berechnen lassen.

Edit:
(top.document.body.offsetHeight - document.body.scrollTop - window.innerHeight)
Das gibt mir ScrollBottom immerhin auf einige Pixel genau an. (Wenn die Seite mindestens eine Seitenhöhe hoch ist...

esistich
2012-06-23, 14:31:09
Was genau hast du denn vor?

Geldmann3
2012-06-23, 14:37:15
Ich schreibe ein Script welches später die Youtube API verwenden soll, um bestimmte Videos anzuzeigen. (Als Thumbnail Vorschau)
Soll ähnlich wie das werden (http://www.youtube.com/watch?v=aVoiofTqUPc)
(Kein Userscript)

Dabei werden allerdings extrem viele Thumbnails geladen. Nun ermittel ich einfach, wie weit der Benutzer von unten entfernt ist, um rechtzeitig Content nachzuladen. Dann muss nicht alles auf einmal geladen werden, sodass der Browser ein slowdown bekommt. Macht Youtube auch so ähnlich.

Hmmm, der IE rechnet nicht. Siehe: http://riederwald.mine.nu/anonymous/Tester.html

(Hier wird auch noch Quelltext aus dem vorherigen Thread verwendet.)
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Create()
{
document.getElementById("Super").innerHTML += "LALALALALA<br>" + (top.document.body.offsetHeight - document.body.scrollTop - window.innerHeight);
}
</script>
</head>
<body>
Hallo, ich bin der Anfang des HTML Documents.
<div id="Super">
</div>
<script type="text/javascript">
var steuerung;
steuerung = setInterval("Create()", 200);
</script>
Ich bin das Ende und soll nie neu geschrieben werden.
</body>
</html>
Blöd, es funktioniert überall, nur der IE macht mal wieder Zicken!

esistich
2012-06-23, 14:56:08
Ich bezweifle das sich das so einfach berechnen lässt, da du ja erst einmal den Inhalt komplett laden musst, um die Höhe ermitteln zu können.

Wäre da ein "Nachladebutton" nicht sinnvoller? Damit ersparst du dir auch den IE gegen den Rest der Welt Workaround.

Geldmann3
2012-06-23, 15:49:16
Ich bezweifle das sich das so einfach berechnen lässt, da du ja erst einmal den Inhalt komplett laden musst, um die Höhe ermitteln zu können.

Das geht schon. Habe an die create Funktion einfach folgende Bedingung angehängt. Der Inhalt ist unendlich und erweitert sich, indem der User Scrollt.
if (top.document.body.offsetHeight - document.body.scrollTop - window.innerHeight <= 1500)

Nur der IE macht Probleme. Eventuell werde ich ihn einfach ignorieren, wenn es keine Lösung gibt. Das wäre aber sehr schade. Da muss es doch eine einfache Möglichkeit für den IE geben.

Edit: Ich brauche im Grunde nur noch eine Möglichkeit im IE die gesamte Seitenhöhe zu ermitteln, weiß jemand wie es geht?

esistich
2012-06-23, 17:11:59
Ja, dass ist mir schon klar, nur wie willst du wissen wann du nachladen musst, ohne die genaue Höhe zu kennen.

Hier (http://liveserver.li.funpic.de/misc/jsscroll/) habe ich dir mal so ein Beispiel hochgeladen.

Wie gesagt, ohne die Größe des gesamten Inhalts zu kennen, geht das nicht.

Geldmann3
2012-06-23, 17:16:02
Kann der IE das denn nicht?
Alle Internetbrowser können die Höhe einer Seite ermitteln doch der IE nicht?

esistich
2012-06-23, 17:30:37
Kann der IE das denn nicht?
Alle Internetbrowser können die Höhe einer Seite ermitteln doch der IE nicht?

Das hat mit dem IE nichts zu tun, du kannst die Höhe eines Elements zwar auslesen, aber eben immer nur mit dem zur Zeit in ihm befindlichem Inhalt. Was du brauchst ist die Gesamthöhe mit einem Inhalt, der nachgeladen wird, also für den Browser nicht bekannt ist, so wie ich das verstanden habe.

ENKORE
2012-06-23, 17:34:37
http://twitter.github.com/bootstrap/javascript.html#scrollspy

Geldmann3
2012-06-23, 18:06:03
Ok, danke habe nun endlich ein funktionierendes Workaround für den IE.