Detect which section is in view

Question

I have this script that is designed to mention which section is in sight in a overflow div so for example if you see a specific section it will say section 1 is in sight if you see

more than 1 section in sight it will say something like for example section 1 is in sight and section 2 is in sight etc...

How can I do something like this? I can't figure this out I tried many things but I can not be able to do what I want :(

This is my code

document.addEventListener('DOMContentLoaded',function(){

  document.querySelector('#building').addEventListener('scroll',whichSectionsAreInSight);

function whichSectionsAreInSight(){
    //???
}
  });

h1{
  margin: 0;
  text-align: center;
}

#building{
  background-color: gray;
  height: 200px;
  width: 200px;
  overflow: auto;
}

.sections{
  height: 225px;
  width: 100%;
}

#section-1{
    background-color: dodgerblue;
}

#section-2{
    background-color: gold;
}

#section-3{
    background-color: red;
}

<div id='building'>
  
  <div id='section-1' class='sections'><h1>Section 1</h1></div>
  <div id='section-2' class='sections'><h1>Section 2</h1></div>
  <div id='section-3' class='sections'><h1>Section 3</h1></div>
  
</div>

<p id='status'></p><!--------The id call status is responsible 
in mentioning which section is in sight-->

[Awesome API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), unfortunately poor support ATM. — Solo, Nov 28 '18 at 06:47
Not that poor, only internet explorer won't play along, as usual — Patrick Hund, Nov 28 '18 at 06:50
Thanks for your response @Solo but I need a suggested method that will also work on IE as well sadly I just read that page and it says that there is no support for IE :( — , Nov 28 '18 at 06:51
But the answer is simple math: `((distance from observed item top to document top) - scroll top) < 0 ? 'in viewport' : 'hidden'`. Scrolled element is usually `document.documentElement`. — Solo, Nov 28 '18 at 06:52
@PatrickHund [It seems](https://caniuse.com/#search=IntersectionObserver) Safari and few others aswell. — Solo, Nov 28 '18 at 06:54
@solo If you know what the solution is can you give a working example with my code if you know how? If you don't know how then its ok. Sorry i'm a newbie still kind of xp that's why — , Nov 28 '18 at 06:56
Possible duplicate of [Check if element is visible after scrolling](https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) — Mohammad, Nov 28 '18 at 06:57
Thanks for your response @Mohammad but most of the answers are in non plain JS and I cant seem to figure out how I can integrate that method to my code example since I only know a little bit of plain JavaScript but I appreciate your attempt but i'm trying to get better everyday. — , Nov 28 '18 at 07:06

score 1 · Answer 1 · answered Nov 28 '18 at 09:08

Hello this is my version of Mohammad's code and your code James. All credit goes to Mohammad and any up votes should go to Mohammad here it goes with the IE fix, my version

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#building').addEventListener('scroll',whichSectionsAreInSight);

function whichSectionsAreInSight(){
  var building= document.querySelector('#building');
  var top = building.scrollTop;
  var bottom = top+building.offsetHeight;
  var arr = [];
  
  Array.prototype.forEach.call(
  building.querySelectorAll('#building .sections'),
  
 function(sections){
    if ((sections.offsetTop < top && top <sections.offsetTop+sections.offsetHeight) || (sections.offsetTop < bottom && bottom < sections.offsetTop+sections.offsetHeight)){
      arr.push(sections.id);
    }
   
   }
   
  );
 
  document.querySelector('#status').innerHTML = arr.join(',')
}

  whichSectionsAreInSight();
  
});

h1{
  margin: 0;
  text-align: center;
}
#building{
  background-color: gray;
  height: 200px;
  width: 200px;
  overflow: auto;
}
.sections{
  height: 225px;
  width: 100%;
}
#section-1{
    background-color: dodgerblue;
}
#section-2{
    background-color: gold;
}
#section-3{
    background-color: red;
}

<div id='building'>
  <div id='section-1' class='sections'><h1>Section 1</h1></div>
  <div id='section-2' class='sections'><h1>Section 2</h1></div>
  <div id='section-3' class='sections'><h1>Section 3</h1></div>
</div>
<p id='status'></p>

score 0 · Accepted Answer · answered Nov 28 '18 at 07:32

In scroll event of parent loop through childs and check that which one in visible and add id of it to array. Al the end print array content into page

document.querySelector('#building').addEventListener('scroll', function(){
  var top = this.scrollTop;
  var bottom = top+this.offsetHeight;
  var arr = [];
  
  this.querySelectorAll("div").forEach(function(div){
    if (
      (div.offsetTop < top && top <div.offsetTop+div.offsetHeight) ||
      (div.offsetTop < bottom && bottom <div.offsetTop+div.offsetHeight)
    ){
      arr.push(div.id);
    }
  });
  document.getElementById("status").innerHTML = arr.join(",")
});

h1{
  margin: 0;
  text-align: center;
}
#building{
  background-color: gray;
  height: 200px;
  width: 200px;
  overflow: auto;
}
.sections{
  height: 225px;
  width: 100%;
}
#section-1{
    background-color: dodgerblue;
}
#section-2{
    background-color: gold;
}
#section-3{
    background-color: red;
}

<p id='status'></p>
<div id='building'>
  <div id='section-1' class='sections'><h1>Section 1</h1></div>
  <div id='section-2' class='sections'><h1>Section 2</h1></div>
  <div id='section-3' class='sections'><h1>Section 3</h1></div>
</div>

Thank you very much @Mohammad it works its what I was looking for but this does not work in IE sadly :( I just tested this in IE 11 this is the error i'm getting 'Object doesn't support property or method 'forEach' How can I get this working with Internet Explorer I been googling how I found a few posts but I have not have any luck yet — , Nov 28 '18 at 08:38
@JamesDean If IE 11 doesn't support `forEach` use `for` instead. http://jsfiddle.net/3kj8oLrt/ — Mohammad, Nov 28 '18 at 08:42
Thank you very much Mohammad your solution worked so it now works in IE now :) — , Nov 28 '18 at 09:11

Detect which section is in view

2 Answers2