I am wondering if there are any HTML5 events associated with whether or not an element has been viewed or "scrolled into view" by the user.

An example could be a longer page with elements at the bottom, which has yet to be scrolled into the users view...

I have seen jQuery solutions to this problem, however I am only interested in figuring out if weather or not this is achievable purely though the use of HTML5 events and JavaScript.

It should be noted that I have already had a look at the "onfocus" event, which (from it's official description) seems to only be applicable if the user selects or "clicks" somewhere on or within the element itself.

I am wondering if there are any HTML5 events associated with whether or not an element has been viewed or "scrolled into view" by the user.

An example could be a longer page with elements at the bottom, which has yet to be scrolled into the users view...

I have seen jQuery solutions to this problem, however I am only interested in figuring out if weather or not this is achievable purely though the use of HTML5 events and JavaScript.

It should be noted that I have already had a look at the "onfocus" event, which (from it's official description) seems to only be applicable if the user selects or "clicks" somewhere on or within the element itself.

• javascript
• html
• events
• onfocus

• 2 Jquery is a javascript library so everything acheivable by jquery is also acheivable by javascript. – user2203117 Commented Dec 29, 2013 at 16:46
• 1 This is achievable through use of scroll and resize events, but there's no event that could tell you when a specific element is scrolled into the view. – Alexey Lebedev Commented Dec 29, 2013 at 16:47
• there is a viewport plugin – mplungjan Commented Dec 29, 2013 at 16:48
• Thank You for Your ments so far... @Emissary: I would have to say that I am looking for a senario where the entire portion of the element has been viewed. – Bwyan Commented Dec 29, 2013 at 16:54
• Possible duplicate of Check if element is visible after scrolling – Ciro Santilli OurBigBook. Commented Oct 7, 2015 at 7:17

4 Answers 4

In plain JavaScript you can use the event "scroll" along with getBoundingClientRect().bottom <= window.innerHeight to determine if an html element has e into view.

document.addEventListener("scroll", inView);

function inView() {
    if (document.getElementById("viewElement").getBoundingClientRect().bottom <= window.innerHeight) {
        console.log("in view");
        // unment below if you only want it to notify once
        // document.removeEventListener("scroll", inView);
    }
}

The console prints "in view" when the element es into view.

<div id="viewElement">Hello there!</div>

There are no built-in events that tell you when an entire DOM element has bee viewable/visible on the page due to scrolling or window resizing.

The only way to do this is to keep track of resize and scroll events (which can each cause more or less of your page to be visible) and then use the scroll position and window height and DOM element positions to calculate if your entire DOM element is visible.

Some relevant pieces of code you can either consider using or look into how they work (these tend to be jQuery-based because they are harder to share if not based on a mon DOM library):

Lazy Load Plugin for jQuery

Element "in view" Event jQuery Plugin

Check if Element is Visible After Scrolling - plain JS

I had to do something similar to this when I built http://f1circle..
When the bottom banner bees visible, I have to show a spotlight to the user asking him to login.

The code that achieves it using angularjs can be viewed at https://github./rajegannathan/angularUtilities/blob/master/directives/eagerload.js

Though it is an angularjs directive, the main logic is in plain javascript. Basically I check if the the last feed's bottom edge is visible and then trigger the spotlight.

I can explain more if required.

As already mentioned, there is no "event" but someone already wrote a method to "detect if a DOM Element is Truly Visible" (the title). It doesn't require JQuery. You might want to check for the value on several events like the document load, scroll or window resize.