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

messmar

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

SpiceLab hat gesagt.:
Ich glaube, Du unterliegst da einem Irrtum, für welches Element scrollTop einen validen Wert zurückgeben kann: https://jsfiddle.net/spicelab/nLxs0Ld9/
Zum Vergrößern anklicken....

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.

SpiceLab hat gesagt.:
Weiter ist zu beachten, ob ein Doctype deklariert wurde, und in welchem Browser getestet wird: https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/scrollTop
Zum Vergrößern anklicken....

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

SpiceLab hat gesagt.:
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
Zum Vergrößern anklicken....

Daran habe ich nicht gedacht.

SpiceLab hat gesagt.:
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]​
Zum Vergrößern anklicken....

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:
messmar hat gesagt.:
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.
Zum Vergrößern anklicken....
.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.
messmar hat gesagt.:
Das Doytype ist deklariert worden (HTML 5)
HTML: 
<!DOCTYPE html>
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
Zitat-Quelle: https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/scrollTop
messmar hat gesagt.:
Ist das so?...
Zum Vergrößern anklicken....
Im "Normalfall" ja :D

https://getbootstrap.com/getting-started/#template
https://getbootstrap.com/getting-started/#examples
messmar hat gesagt.:
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!
Zum Vergrößern anklicken....
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:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück