Execute a function if a targeted element is in sight or is passed by scrolling in a overflow div
I'm not sure if this is possible but how can I execute a function if a certain element with a certain id is in sight or is passed in a overflow div regardless how fast you scroll.
Visual example
I try many times but I can't figure how I can do this?
This is my code
/*document.querySelector('#trigger'); ?????*/
function triggerisInSightOrIsPassed(){
//???
alert('Trigger is in sight or is passed');
}#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id='container'>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id='trigger'>random</h1>
<h1>random</h1>
<h1>random</h1>
</div>javascript
asked Nov 20 at 22:45
James Dean
604
add a comment |
I'm not sure if this is possible but how can I execute a function if a certain element with a certain id is in sight or is passed in a overflow div regardless how fast you scroll.
Visual example
I try many times but I can't figure how I can do this?
This is my code
/*document.querySelector('#trigger'); ?????*/
function triggerisInSightOrIsPassed(){
//???
alert('Trigger is in sight or is passed');
}#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id='container'>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id='trigger'>random</h1>
<h1>random</h1>
<h1>random</h1>
</div>javascript
asked Nov 20 at 22:45
James Dean
604
add a comment |
I'm not sure if this is possible but how can I execute a function if a certain element with a certain id is in sight or is passed in a overflow div regardless how fast you scroll.
Visual example
I try many times but I can't figure how I can do this?
This is my code
/*document.querySelector('#trigger'); ?????*/
function triggerisInSightOrIsPassed(){
//???
alert('Trigger is in sight or is passed');
}#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id='container'>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id='trigger'>random</h1>
<h1>random</h1>
<h1>random</h1>
</div>javascript
asked Nov 20 at 22:45
James Dean
604
I'm not sure if this is possible but how can I execute a function if a certain element with a certain id is in sight or is passed in a overflow div regardless how fast you scroll.
Visual example
I try many times but I can't figure how I can do this?
This is my code
/*document.querySelector('#trigger'); ?????*/
function triggerisInSightOrIsPassed(){
//???
alert('Trigger is in sight or is passed');
}#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id='container'>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id='trigger'>random</h1>
<h1>random</h1>
<h1>random</h1>
</div>/*document.querySelector('#trigger'); ?????*/
function triggerisInSightOrIsPassed(){
//???
alert('Trigger is in sight or is passed');
}#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id='container'>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id='trigger'>random</h1>
<h1>random</h1>
<h1>random</h1>
</div>/*document.querySelector('#trigger'); ?????*/
function triggerisInSightOrIsPassed(){
//???
alert('Trigger is in sight or is passed');
}#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id='container'>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id='trigger'>random</h1>
<h1>random</h1>
<h1>random</h1>
</div>javascript
javascript
asked Nov 20 at 22:45
James Dean
604
asked Nov 20 at 22:45
James Dean
604
edited Nov 20 at 22:52
asked Nov 20 at 22:45
James Dean
604
asked Nov 20 at 22:45
James Dean
604
asked Nov 20 at 22:45
James Dean
604
604
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can get the current position of the trigger element using it's offsetTop and you can get the current scroll position using scrollTop.
So your trigger element would be inside view, as soon as the scrollTop and offsetHeight of the container is larger than the triggers offsetTop
I did change the alert to console.log so that it would be less intrusive :)
To detect the changes in the scrolling position, you can just attach a listener to the scroll event
const triggerElement = document.querySelector('#trigger');
document.querySelector('#container').addEventListener('scroll', function( e ) {
if (e.target.scrollTop + e.target.offsetHeight > triggerElement.offsetTop) {
console.log('Trigger is in sight or is passed');
}
} );#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id="container">
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id="trigger">random</h1>
<h1>random</h1>
<h1>random</h1>
</div>answered Nov 20 at 22:57
Icepickle
8,60032036
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
});
}
});
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%2f53402716%2fexecute-a-function-if-a-targeted-element-is-in-sight-or-is-passed-by-scrolling-i%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can get the current position of the trigger element using it's offsetTop and you can get the current scroll position using scrollTop.
So your trigger element would be inside view, as soon as the scrollTop and offsetHeight of the container is larger than the triggers offsetTop
I did change the alert to console.log so that it would be less intrusive :)
To detect the changes in the scrolling position, you can just attach a listener to the scroll event
const triggerElement = document.querySelector('#trigger');
document.querySelector('#container').addEventListener('scroll', function( e ) {
if (e.target.scrollTop + e.target.offsetHeight > triggerElement.offsetTop) {
console.log('Trigger is in sight or is passed');
}
} );#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id="container">
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id="trigger">random</h1>
<h1>random</h1>
<h1>random</h1>
</div>answered Nov 20 at 22:57
Icepickle
8,60032036
add a comment |
You can get the current position of the trigger element using it's offsetTop and you can get the current scroll position using scrollTop.
So your trigger element would be inside view, as soon as the scrollTop and offsetHeight of the container is larger than the triggers offsetTop
I did change the alert to console.log so that it would be less intrusive :)
To detect the changes in the scrolling position, you can just attach a listener to the scroll event
const triggerElement = document.querySelector('#trigger');
document.querySelector('#container').addEventListener('scroll', function( e ) {
if (e.target.scrollTop + e.target.offsetHeight > triggerElement.offsetTop) {
console.log('Trigger is in sight or is passed');
}
} );#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id="container">
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id="trigger">random</h1>
<h1>random</h1>
<h1>random</h1>
</div>answered Nov 20 at 22:57
Icepickle
8,60032036
add a comment |
You can get the current position of the trigger element using it's offsetTop and you can get the current scroll position using scrollTop.
So your trigger element would be inside view, as soon as the scrollTop and offsetHeight of the container is larger than the triggers offsetTop
I did change the alert to console.log so that it would be less intrusive :)
To detect the changes in the scrolling position, you can just attach a listener to the scroll event
const triggerElement = document.querySelector('#trigger');
document.querySelector('#container').addEventListener('scroll', function( e ) {
if (e.target.scrollTop + e.target.offsetHeight > triggerElement.offsetTop) {
console.log('Trigger is in sight or is passed');
}
} );#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id="container">
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id="trigger">random</h1>
<h1>random</h1>
<h1>random</h1>
</div>answered Nov 20 at 22:57
Icepickle
8,60032036
You can get the current position of the trigger element using it's offsetTop and you can get the current scroll position using scrollTop.
So your trigger element would be inside view, as soon as the scrollTop and offsetHeight of the container is larger than the triggers offsetTop
I did change the alert to console.log so that it would be less intrusive :)
To detect the changes in the scrolling position, you can just attach a listener to the scroll event
const triggerElement = document.querySelector('#trigger');
document.querySelector('#container').addEventListener('scroll', function( e ) {
if (e.target.scrollTop + e.target.offsetHeight > triggerElement.offsetTop) {
console.log('Trigger is in sight or is passed');
}
} );#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id="container">
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id="trigger">random</h1>
<h1>random</h1>
<h1>random</h1>
</div>const triggerElement = document.querySelector('#trigger');
document.querySelector('#container').addEventListener('scroll', function( e ) {
if (e.target.scrollTop + e.target.offsetHeight > triggerElement.offsetTop) {
console.log('Trigger is in sight or is passed');
}
} );#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id="container">
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id="trigger">random</h1>
<h1>random</h1>
<h1>random</h1>
</div>const triggerElement = document.querySelector('#trigger');
document.querySelector('#container').addEventListener('scroll', function( e ) {
if (e.target.scrollTop + e.target.offsetHeight > triggerElement.offsetTop) {
console.log('Trigger is in sight or is passed');
}
} );#container{
background-color: purple;
height: 200px;
width: 200px;
overflow: auto;
}
h1{
color: gold;
}
#trigger{
color: red;
}<div id="container">
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1>random</h1>
<h1 id="trigger">random</h1>
<h1>random</h1>
<h1>random</h1>
</div>answered Nov 20 at 22:57
Icepickle
8,60032036
answered Nov 20 at 22:57
Icepickle
8,60032036
answered Nov 20 at 22:57
Icepickle
8,60032036
answered Nov 20 at 22:57
Icepickle
8,60032036
8,60032036
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53402716%2fexecute-a-function-if-a-targeted-element-is-in-sight-or-is-passed-by-scrolling-i%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
