Run Any Function When Any Content Is Visible In Browser Screen Using JavaScript

Do you want to run any function or lines of code in JavaScript when any content is visible on browser screen after scrolling the window using pure Vanilla JavaScript then here is the snippet code that also works on toggle properties?

There are many code snippets available online or on many other blogs and website but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1. It Will Work On All Major Browsers.
2. Pure Vanilla JavaScript Code.
3. No External JQuery Or Script.
4. Small Snippet COde With Easy Understanding.
5. Toggle Function, One Time Function Or Infinite Features Enabled.

How To Run Any Function When Any Content Is Visible In Browser?

There are few easy and understandable steps to achieve your desired functionality using pure Vanilla JavaScript that we are gonna share below. Follow each step perfectly.

Create An HTML Element:

First of all, make a targeted DIV that you want to functional while visible on the browser screen.

<div id="desiredDIVid"><!-- Your Content Here</div>

Register The addEventListener Event:

Now register a JavaScript addEventListener function on a scroll as below.

document.addEventListener("scroll", OnScrollView);

After this, you have to choose any of the ones from the following as per your desire and their functionality.

1.) Run Function For One Time Only:

Use this function when you want to run your desired function or code only one time when your visitor scroll until your DIV is visible to the browser screen and then disable this function or line of code to ever run again on that page until reload.

function OnScrollView() {
  if (document.getElementById("desiredDIVid").getBoundingClientRect().bottom <= window.innerHeight) {

    // Type Your Desired Function Or Code Here
 
    // Do Not Remove The Below Line
    document.removeEventListener("scroll", OnScrollView);
  }
}

2.) Run Function For Unlimited Time:

Use this function when you want to run your desired function or code unlimited time whenever your visitor scrolls again and again until your DIV is visible each time to the browser screen.

function OnScrollView() {
  if (document.getElementById("desiredDIVid").getBoundingClientRect().bottom <= window.innerHeight) {
  
    // Type Your Desired Function Or Code Here

  }
}

3.) Run Function As Toggle View/Hide Unlimited Time:

Use this function when you want to run your desired function or code unlimited time whenever your visitor scrolls again and again until your DIV is visible each time to the browser screen but the difference is that it will toggle the function properties like if you scroll till the visibility of your desired DIV, it will run the function or line of code and when you scroll it away from the browser screen it will run other function or line of code. It will remain toggling when you keep scrolling to view or hide the div between codes.

function OnScrollView() {
  if (document.getElementById("desiredDIVid").getBoundingClientRect().bottom <= window.innerHeight) {

    // Type Your Desired Function Or Code Here

  } else if (document.getElementById("desiredDIVid").getBoundingClientRect().bottom >= window.innerHeight) {

    // Type Your Desired Function Or Code Here

  }
}

Final Words:

Be aware that the function will be placed after the DIV or the end of the document. Rest all is in your hand if you want to customize it or play with it. That’s all we have. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allowed to us. Don’t forget to share this with your friends so they can also take benefit from it and leave.