Detect which section is in view
1
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-->javascript
asked Nov 28 '18 at 6:29
James DeanJames Dean
1055
|
show 4 more comments
1
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-->javascript
asked Nov 28 '18 at 6:29
James DeanJames Dean
1055
Awesome API, unfortunately poor support ATM.
– Solo
Nov 28 '18 at 6:47
Not that poor, only internet explorer won't play along, as usual
– Patrick Hund
Nov 28 '18 at 6: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 :(
– James Dean
Nov 28 '18 at 6:51
But the answer is simple math:((distance from observed item top to document top) - scroll top) < 0 ? 'in viewport' : 'hidden'. Scrolled element is usuallydocument.documentElement.
– Solo
Nov 28 '18 at 6:52
@PatrickHund It seems Safari and few others aswell.
– Solo
Nov 28 '18 at 6:54
|
show 4 more comments
1
1
1
0
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-->javascript
asked Nov 28 '18 at 6:29
James DeanJames Dean
1055
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-->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-->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-->javascript
javascript
asked Nov 28 '18 at 6:29
James DeanJames Dean
1055
asked Nov 28 '18 at 6:29
James DeanJames Dean
1055
asked Nov 28 '18 at 6:29
James DeanJames Dean
1055
asked Nov 28 '18 at 6:29
James DeanJames Dean
1055
asked Nov 28 '18 at 6:29
James DeanJames Dean
1055
1055
Awesome API, unfortunately poor support ATM.
– Solo
Nov 28 '18 at 6:47
Not that poor, only internet explorer won't play along, as usual
– Patrick Hund
Nov 28 '18 at 6: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 :(
– James Dean
Nov 28 '18 at 6:51
But the answer is simple math:((distance from observed item top to document top) - scroll top) < 0 ? 'in viewport' : 'hidden'. Scrolled element is usuallydocument.documentElement.
– Solo
Nov 28 '18 at 6:52
@PatrickHund It seems Safari and few others aswell.
– Solo
Nov 28 '18 at 6:54
|
show 4 more comments
Awesome API, unfortunately poor support ATM.
– Solo
Nov 28 '18 at 6:47
Not that poor, only internet explorer won't play along, as usual
– Patrick Hund
Nov 28 '18 at 6: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 :(
– James Dean
Nov 28 '18 at 6:51
But the answer is simple math:((distance from observed item top to document top) - scroll top) < 0 ? 'in viewport' : 'hidden'. Scrolled element is usuallydocument.documentElement.
– Solo
Nov 28 '18 at 6:52
@PatrickHund It seems Safari and few others aswell.
– Solo
Nov 28 '18 at 6:54
Awesome API, unfortunately poor support ATM.
– Solo
Nov 28 '18 at 6:47
Awesome API, unfortunately poor support ATM.
– Solo
Nov 28 '18 at 6:47
Not that poor, only internet explorer won't play along, as usual
– Patrick Hund
Nov 28 '18 at 6:50
Not that poor, only internet explorer won't play along, as usual
– Patrick Hund
Nov 28 '18 at 6: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 :(
– James Dean
Nov 28 '18 at 6:51
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 :(
– James Dean
Nov 28 '18 at 6: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 6:52
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 6:52
@PatrickHund It seems Safari and few others aswell.
– Solo
Nov 28 '18 at 6:54
@PatrickHund It seems Safari and few others aswell.
– Solo
Nov 28 '18 at 6:54
|
show 4 more comments
2 Answers
2
active
oldest
votes
2
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>answered Nov 28 '18 at 7:32
MohammadMohammad
15.8k123764
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
– James Dean
Nov 28 '18 at 8:38
@JamesDean If IE 11 doesn't supportforEachuseforinstead. jsfiddle.net/3kj8oLrt
– Mohammad
Nov 28 '18 at 8:42
Thank you very much Mohammad your solution worked so it now works in IE now :)
– James Dean
Nov 28 '18 at 9:11
add a comment |
2
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>answered Nov 28 '18 at 9:08
Thomas Wayne Thomas Wayne
1497
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53513409%2fdetect-which-section-is-in-view%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
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>answered Nov 28 '18 at 7:32
MohammadMohammad
15.8k123764
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
– James Dean
Nov 28 '18 at 8:38
@JamesDean If IE 11 doesn't supportforEachuseforinstead. jsfiddle.net/3kj8oLrt
– Mohammad
Nov 28 '18 at 8:42
Thank you very much Mohammad your solution worked so it now works in IE now :)
– James Dean
Nov 28 '18 at 9:11
add a comment |
2
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>answered Nov 28 '18 at 7:32
MohammadMohammad
15.8k123764
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
– James Dean
Nov 28 '18 at 8:38
@JamesDean If IE 11 doesn't supportforEachuseforinstead. jsfiddle.net/3kj8oLrt
– Mohammad
Nov 28 '18 at 8:42
Thank you very much Mohammad your solution worked so it now works in IE now :)
– James Dean
Nov 28 '18 at 9:11
add a comment |
2
2
2
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>answered Nov 28 '18 at 7:32
MohammadMohammad
15.8k123764
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>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>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>answered Nov 28 '18 at 7:32
MohammadMohammad
15.8k123764
answered Nov 28 '18 at 7:32
MohammadMohammad
15.8k123764
answered Nov 28 '18 at 7:32
MohammadMohammad
15.8k123764
answered Nov 28 '18 at 7:32
MohammadMohammad
15.8k123764
15.8k123764
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
– James Dean
Nov 28 '18 at 8:38
@JamesDean If IE 11 doesn't supportforEachuseforinstead. jsfiddle.net/3kj8oLrt
– Mohammad
Nov 28 '18 at 8:42
Thank you very much Mohammad your solution worked so it now works in IE now :)
– James Dean
Nov 28 '18 at 9:11
add a comment |
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
– James Dean
Nov 28 '18 at 8:38
@JamesDean If IE 11 doesn't supportforEachuseforinstead. jsfiddle.net/3kj8oLrt
– Mohammad
Nov 28 '18 at 8:42
Thank you very much Mohammad your solution worked so it now works in IE now :)
– James Dean
Nov 28 '18 at 9:11
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
– James Dean
Nov 28 '18 at 8:38
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
– James Dean
Nov 28 '18 at 8:38
@JamesDean If IE 11 doesn't support
forEach use for instead. jsfiddle.net/3kj8oLrt– Mohammad
Nov 28 '18 at 8:42
@JamesDean If IE 11 doesn't support
forEach use for instead. jsfiddle.net/3kj8oLrt– Mohammad
Nov 28 '18 at 8:42
Thank you very much Mohammad your solution worked so it now works in IE now :)
– James Dean
Nov 28 '18 at 9:11
Thank you very much Mohammad your solution worked so it now works in IE now :)
– James Dean
Nov 28 '18 at 9:11
add a comment |
2
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>answered Nov 28 '18 at 9:08
Thomas Wayne Thomas Wayne
1497
add a comment |
2
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>answered Nov 28 '18 at 9:08
Thomas Wayne Thomas Wayne
1497
add a comment |
2
2
2
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>answered Nov 28 '18 at 9:08
Thomas Wayne Thomas Wayne
1497
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>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>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>answered Nov 28 '18 at 9:08
Thomas Wayne Thomas Wayne
1497
answered Nov 28 '18 at 9:08
Thomas Wayne Thomas Wayne
1497
answered Nov 28 '18 at 9:08
Thomas Wayne Thomas Wayne
1497
answered Nov 28 '18 at 9:08
Thomas Wayne Thomas Wayne
1497
1497
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53513409%2fdetect-which-section-is-in-view%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Awesome API, unfortunately poor support ATM.
– Solo
Nov 28 '18 at 6:47
Not that poor, only internet explorer won't play along, as usual
– Patrick Hund
Nov 28 '18 at 6: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 :(
– James Dean
Nov 28 '18 at 6:51
But the answer is simple math:
((distance from observed item top to document top) - scroll top) < 0 ? 'in viewport' : 'hidden'. Scrolled element is usuallydocument.documentElement.– Solo
Nov 28 '18 at 6:52
@PatrickHund It seems Safari and few others aswell.
– Solo
Nov 28 '18 at 6:54