scrollTop für DIV Element gibt immer 0 zurück

messmar

Erfahrenes Mitglied
Guten Morgen,

Hat bitte Jemand eine Idee warum die
Code:
scrollTop
für den DIV hier immer 0 zurückgibt.

HTML:
HTML:
<div>....</div>
<div class="container-fluid portfolio-me" id="xxx" style="border:1px solid green;">
          
            <ul class="ul-wrapper-portfolio">
          
                <li>
                    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=450%C3%97350&w=450&h=300" class="img-thumbnail">
                </li>
                <li>
                    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=450%C3%97350&w=450&h=300" class="img-thumbnail">
                </li>
                <li class="li-clear-portfolio">
                    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=450%C3%97350&w=450&h=350" class="img-thumbnail">
                </li>
                <li>
                    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=450%C3%97350&w=450&h=350" class="img-thumbnail">
                </li>
              
            </ul>
          
        </div>
<div>...</div>

JavaScript:

Code:
var portfolio = document.getElementById('xxx');

document.addEventListener("scroll", function( e ){
    console.log( 'PORTFOLIO: ' + portfolio.scrollTop );
}, true);

Der JavaScript Code ist richtig und gibt keinen Fehler aus und der HTML auch - für HTML verwende ich bootstrap. Es ist eine ganz simple und einfach Eventhandler zuweisung, aber ich kann es einfach nicht
verstehen, warum es immer 0 zurück gibt.

CSS:
HTML:
.about-me, .portfolio-me, .contact-me {
    width:70%; margin:0 auto; padding:0 0 40px 0; background-color:#DBE0FD; display:block;
}

Danke und Gruß
Messmar
 
Ich glaube, Du unterliegst da einem Irrtum, für welches Element scrollTop einen validen Wert zurückgeben kann: https://jsfiddle.net/spicelab/nLxs0Ld9/

Weiter ist zu beachten, ob ein Doctype deklariert wurde, und in welchem Browser getestet wird: https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/scrollTop

Wenn die Position eines darin enthaltenen Elements zurückgegeben werden soll, muß diese rechnerisch ermittelt werden: https://www.kirupa.com/html5/get_element_position_using_javascript.htm

Da Du das CSS-Framework Bootstrap verwendest, das die jQuery-Bibliothek voraussetzt, warum schreibst Du die Scripts nicht direkt in jQuery?

https://jsfiddle.net/spicelab/uavq6zy2/

[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Danke schon mal...

Ich glaube, Du unterliegst da einem Irrtum, für welches Element scrollTop einen validen Wert zurückgeben kann: https://jsfiddle.net/spicelab/nLxs0Ld9/

Da denke ich nachdem ich das Element per
Code:
getElementById()
anspreche und den Eventhandler dem Dokument zuweise, die Position des Elements by Scrollen auslesen kann bzw. zurückbekomme.

Weiter ist zu beachten, ob ein Doctype deklariert wurde, und in welchem Browser getestet wird: https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/scrollTop

Das Doytype ist deklariert worden (HTML 5)
HTML:
<!DOCTYPE html>

Wenn die Position eines darin enthaltenen Elements zurückgegeben werden soll, muß diese rechnerisch ermittelt werden: https://www.kirupa.com/html5/get_element_position_using_javascript.htm

Daran habe ich nicht gedacht.

Wenn Du das CSS-Framework Bootstrap verwendest, das die jQuery-Bibliothek voraussetzt, warum schreibst Du die Scripts nicht direkt in jQuery?

https://jsfiddle.net/spicelab/uavq6zy2/
[edit]Tipp-Ex[/edit]

Ist das so?...

Ich habe es jetzt so gelöst und auch mit native JS und ich muss sagen, dass Du mich irgendwie auf den richtigen Weg gebracht hast. Thanks!

Code:
'use strict';
var w = this;
var portfolio = document.getElementById('xxx');
document.addEventListener("scroll", function( e ){
    var toTop = portfolio.offsetTop - w.scrollY;
    console.log( toTop );
   
    if(toTop === 54) alert('It\'s on the top');

}, true);

Danke!
Messmar
 
Zuletzt bearbeitet:
Da denke ich nachdem ich das Element per
Code:
getElementById()
anspreche und den Eventhandler dem Dokument zuweise, die Position des Elements by Scrollen auslesen kann bzw. zurückbekomme.
.scrollTop kann unmittelbar auf Elemente angewendet werden, die scrollfähig sind - <div id="xxx"> zählt in Deiner Seite nicht dazu, weil dafür u.a. overflow:auto fehlt.
Das Doytype ist deklariert worden (HTML 5)
HTML:
<!DOCTYPE html>
Und da kommt es dann darauf an, in welchem Browser das Script angewendet wird:
SELFHTML | JavaScript/DOM/Element/scrollTop hat gesagt.:
Wenn ein doctype angegeben ist, ermittelt scrollTop den gescrollten Wert des body-elements in IE und Firefox; in Chrome und Safari gibt er den Wert null zurück.
Zitat-Quelle: https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/scrollTop
Im "Normalfall" ja :D

https://getbootstrap.com/getting-started/#template
https://getbootstrap.com/getting-started/#examples
Ich habe es jetzt so gelöst und auch mit native JS und ich muss sagen, dass Du mich irgendwie auf den richtigen Weg gebracht hast. Thanks!
Selbstverständlich kann in einer Bootstrap-Page trotz eingebundenem jQuery auch natives JS angewendet werden.

Nur wozu? Wo die Bibliothek doch zum einen alle nötigen Funktionen zur DOM-Navigation u. -Manipulation bereitstellt, zum anderen viel Arbeit/Zeit spart, komplexere Anwendungen auf die Beine zu stellen, und zu guter letzt für alle denkbaren "Gadgets" von der jQuery-Community Plugins entwickelt und kostenfrei bereitgestellt werden :cool:

Wenn diese Argumente noch immer nicht überzeugen, dann sei als Sahnehäubchen die Browserkompatibilität genannt :)

[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Zurück