CODEWITHSUNDEEP
javascriptwordpressscrolltop
Joran
Joran

Reputation: 15

Scroll.top is returning 0 but I can scroll in the element

Hi there I'am trying to call a action on scroll and I want to activate the function if you scrolled past the element.

If I console.log it it will return 0 while i can scroll in the element.

function scroll(){
    let element = document.getElementById("i");
   let elementcontainer = document.getElementById("phone3")
    console.log(elementcontainer.scrollTop);

  
}
.phone3 {
    position: relative;
    height: 550vh;
    width: 100%;

    .container {
        height: 100vh;
        width: 100%;
        position: sticky;
        top: 0;
        #i {
            transition: ease 0.05s;
            height: 100vh;
            width: 100vw;
            top: 0;
            right: 0;
        }
    }

}
   <script>
    window.onscroll = scroll;
</script>
   <div id="phone3" class="phone3">
        <div id="container" class="container">
            <div id="i"></div>
        </div>
    </div>

Upvotes: 0

Views: 1505

Answers (1)

metatron
metatron

Reputation: 999

The scrollbar is attached to the viewport, so that is the element that is scrolling.

Try this code:

    function scroll(){
        console.log(document.querySelector('html').scrollTop);  
    }

    window.onscroll = scroll;

To detect if an element is entering the viewport you could compare scrollTop to the elements position (= offsetTop) and substract the viewport height, otherwise you will have the moment when the element touches the viewport's top. You could add a value to postpone the trigger. In the example below the element is 200px in the viewport when the condition switches to true.

const vp = document.querySelector('html'),
      container = document.querySelector('#container');

function scroll(){
    console.log(vp.scrollTop > container.offsetTop - vp.clientHeight + 200);  
}

window.onscroll = scroll;

Note that there are some edge cases to consider. offsetTop gives the distance between the outer border of the element and the inner border of the "offsetparent", which could be something else than the viewport when your layout starts to get more complex. You can read the details here: developer mozilla scrollTop.

If you don't want to overindulge into the fine print you could consider a ready made solution such as waypoint.js. That's what I usually use for this type of things.

Edit:

If you want to scroll in an element you should add overflow: auto in your css to trigger scrollbars. In that case you should add the scroll event to the element. I edited your css and js a bit:

js:

const scrollParent = document.querySelector('#phone3'),
      container = document.querySelector('#container');

function scroll(){
    console.log(scrollParent.scrollTop > container.offsetTop - scrollParent.clientHeight + 200);  
}

scrollParent.onscroll = scroll;

css:

.phone3 {
  position: relative;
  height: 80vh;
  width: 100%;
  overflow: auto;
  background-color: blue;
}
.phone3 .container {
  height: 200%;
  width: 100%;
  position: absolute;
  top: 120%;
  background-color: pink;
}
.phone3 .container #i {
  transition: ease 0.05s;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
}

If this does not answer your question, could you be more specific in what you want to achieve?

Upvotes: 1

Related Questions