How to check if element is visible after scrolling

Question

I m loading elements via AJAX  Some of them are only visible if you scroll down the page  Is there any way I can know if an element is now in the visible part of the page

User · Answer

After running around unproductively to and using several codes that didn t work  This is what worked for me on vertical scroll visibility using Jquery  Replce   footerplace  with the element you d like to track vertically   jQuery expr filters offscreen   function el      var rect   el getBoundingClientRect      console log rect    console log  window height     window  height        return               rect top  lt     window  height     amp  amp   rect bottom  lt     window  height                     document  scroll function        if      footerplace   is   offscreen           console log  this is true            footerplace   is   offscreen          else        console log  this is false            footerplace   is   offscreen

User · Answer

The easiest solution I found for this is Intersection Observer API   var observer   new IntersectionObserver function entries        if entries 0  isIntersecting     true          console log  Element has just become visible in screen         threshold   0       observer observe document querySelector   main-container

User · Answer

This should do the trick   function isScrolledIntoView elem        var docViewTop     window  scrollTop        var docViewBottom   docViewTop     window  height         var elemTop     elem  offset   top      var elemBottom   elemTop     elem  height         return   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop        Simple Utility Function This will allow you to call a utility function that accepts the element you re looking for and if you want the element to be fully in view or partially   function Utils         Utils prototype         constructor  Utils      isElementInView  function  element  fullyInView            var pageTop     window  scrollTop            var pageBottom   pageTop     window  height            var elementTop     element  offset   top          var elementBottom   elementTop     element  height             if  fullyInView     true                return   pageTop  lt  elementTop   amp  amp   pageBottom  gt  elementBottom              else               return   elementTop  lt   pageBottom   amp  amp   elementBottom  gt   pageTop                        var Utils   new Utils      Usage  var isElementInView   Utils isElementInView     flyout-left-container    false    if  isElementInView        console log  in view      else       console log  out of view

User · Answer

WebResourcesDepot wrote a script to load while scrolling that uses jQuery some time ago  You can view their Live Demo Here  The beef of their functionality was this     window  scroll function      if     window  scrollTop        document  height   -   window  height         lastAddedLiveFunc             function lastAddedLiveFunc           div lastPostsLoader   html   lt img src  images bigLoader gif  gt         post  default asp action getLastPosts amp lastPostID       wrdLatest last   attr  id        function data           if  data                        wrdLatest last   after data                               div lastPostsLoader   empty

User · Answer

Plain vanilla to check if element  el  is visible in scrollable div  holder  function isElementVisible  el  holder      holder   holder    document body   const   top  bottom  height     el getBoundingClientRect     const holderRect   holder getBoundingClientRect      return top  lt   holderRect top       holderRect top - top  lt   height       bottom - holderRect bottom  lt   height    Usage with jQuery  var el      tr last   get 0   var holder      table   get 0   var isVisible   isScrolledIntoView el  holder

User · Answer

How about  function isInView elem      return   elem  offset   top -   window  scrollTop    lt    elem  height         After that you can trigger whatever you want once the element is in view like this     window  scroll function       if  isInView     classOfDivToCheck             fire whatever you what        dothis         That works for me just fine

User · Answer

The jquery scrollspy plugin will allow you to easily do this  https   github com thesmart jquery-scrollspy      tile   on  scrollSpy enter   function         console log  enter      this  attr  id              tile   on  scrollSpy exit   function         console log  exit      this  attr  id              tile   scrollSpy

User · Answer

You can make use of jquery plugin  onScreen  to check if the element is in the current viewport when you scroll  The plugin sets the   onScreen  of the selector to true when the selector appears on the screen  This is the link for the plugin which you can include in your project       http   benpickles github io onScreen jquery onscreen min js   You can try the below example which works for me     document  scroll function         if     div2   is   onScreen              console log  Element appeared on Screen              do all your stuffs here when element is visible            else           console log  Element not on Screen              do all your stuffs here when element is not visible              HTML Code    lt div id  div1  style  width  400px  height  1000px  padding-top  20px  position  relative  top  45px  gt  lt  div gt   lt br gt   lt hr   gt   lt br gt   lt div id  div2  style  width  400px  height  200px  gt  lt  div gt    CSS    div1       background-color  red     div2       background-color  green

User · Answer

This method will return true if any part of the element is visible on the page  It worked better in my case and may help someone else   function isOnScreen element      var elementOffsetTop   element offset   top    var elementHeight   element height       var screenScrollTop     window  scrollTop      var screenHeight     window  height       var scrollIsAboveElement   elementOffsetTop   elementHeight - screenScrollTop  gt   0    var elementIsVisibleOnScreen   screenScrollTop   screenHeight - elementOffsetTop  gt   0     return scrollIsAboveElement  amp  amp  elementIsVisibleOnScreen

User · Answer

The only plugin which works consistently for me for doing this  is  https   github com customd jquery-visible  I ported this plugin to GWT recently since I didn t want to add jquery as a dependency just for using the plugin  Here s my  simple  port  just including the functionality that I need for my use case    public static boolean isVisible Element e          vp   viewPort  b   bottom  l   left  t   top  r   right     int vpWidth     Window getClientWidth        int vpHeight   Window getClientHeight          boolean tViz     e getAbsoluteTop    gt   0  amp  amp  e getAbsoluteTop   lt   vpHeight       boolean bViz    e getAbsoluteBottom    gt   0  amp  amp  e getAbsoluteBottom    lt   vpHeight       boolean lViz    e getAbsoluteLeft    gt   0  amp  amp  e getAbsoluteLeft    lt  vpWidth       boolean rViz    e getAbsoluteRight     gt   0  amp  amp  e getAbsoluteRight     lt   vpWidth        boolean vVisible     tViz  amp  amp  bViz      boolean hVisible     lViz  amp  amp  rViz       return hVisible  amp  amp  vVisible

User · Answer

isScrolledIntoView is a very needful function  so I tried it  it works for elements not heigher than the viewport  but if the element is bigger as the viewport it does not work  To fix this easily change the condition   return   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop      to this   return  docViewBottom  gt   elemTop  amp  amp  docViewTop  lt   elemBottom     See demo here  http   jsfiddle net RRSmQ

User · Answer

This considers any padding  border or margin the element has as well as elements larger than the viewport itself   function inViewport  ele        var lBound     window  scrollTop            uBound   lBound     window  height            top    ele offset   top          bottom   top    ele outerHeight true        return  top  gt  lBound  amp  amp  top  lt  uBound              bottom  gt  lBound  amp  amp  bottom  lt  uBound              lBound  gt   top  amp  amp  lBound  lt   bottom              uBound  gt   top  amp  amp  uBound  lt   bottom       To call it use something like this   var  myElement       my-element        canUserSeeIt   inViewport  myElement    console log canUserSeeIt      true  if element is visible  false otherwise

User · Answer

I prefer using jQuery expr  jQuery extend jQuery expr               inview  function  elem            var t     elem           var offset   t offset            var win     window            var winST   win scrollTop            var elHeight   t outerHeight true            if   offset top  gt  winST - elHeight  amp  amp  offset top  lt  winST   elHeight   win height                  return true                            return false                so you can use it this way      my-elem inview      returns only element that is in view     my-elem   is   inview      check if element is in view     my-elem inview   length    check how many elements are in view   You can easly add such code inside scroll event function etc  to check it everytime user will scroll the view

User · Answer

This method will return true if any part of the element is visible on the page  It worked better in my case and may help someone else   function isOnScreen element      var elementOffsetTop   element offset   top    var elementHeight   element height       var screenScrollTop     window  scrollTop      var screenHeight     window  height       var scrollIsAboveElement   elementOffsetTop   elementHeight - screenScrollTop  gt   0    var elementIsVisibleOnScreen   screenScrollTop   screenHeight - elementOffsetTop  gt   0     return scrollIsAboveElement  amp  amp  elementIsVisibleOnScreen

User · Answer

I added my code modification  Unfortunately  I can see everyone in their version and everyone omits the use of the debance function  Which answer is for your Event not to fire  for example  200 times per second while scrolling    window  scroll function            if  isInView     class                  debounce                  someFunction    5                                     function isInView elem           if document documentElement clientWidth  gt  991               return   elem  offset   top -   window  scrollTop    lt    elem  height             else               doSometing

User · Answer

This should do the trick   function isScrolledIntoView elem        var docViewTop     window  scrollTop        var docViewBottom   docViewTop     window  height         var elemTop     elem  offset   top      var elemBottom   elemTop     elem  height         return   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop        Simple Utility Function This will allow you to call a utility function that accepts the element you re looking for and if you want the element to be fully in view or partially   function Utils         Utils prototype         constructor  Utils      isElementInView  function  element  fullyInView            var pageTop     window  scrollTop            var pageBottom   pageTop     window  height            var elementTop     element  offset   top          var elementBottom   elementTop     element  height             if  fullyInView     true                return   pageTop  lt  elementTop   amp  amp   pageBottom  gt  elementBottom              else               return   elementTop  lt   pageBottom   amp  amp   elementBottom  gt   pageTop                        var Utils   new Utils      Usage  var isElementInView   Utils isElementInView     flyout-left-container    false    if  isElementInView        console log  in view      else       console log  out of view

User · Answer

Here is another solution from http   web-profile com ua    lt script type  text javascript  gt    fn is on screen   function        var win     window       var viewport             top   win scrollTop            left   win scrollLeft              viewport right   viewport left   win width        viewport bottom   viewport top   win height         var bounds   this offset        bounds right   bounds left   this outerWidth        bounds bottom   bounds top   this outerHeight         return    viewport right  lt  bounds left    viewport left  gt  bounds right       viewport bottom  lt  bounds top    viewport top  gt  bounds bottom         if      target   length  gt  0        if target element exists in DOM     if      target   is on screen          if target element is visible on screen after DOM loaded             log   html   lt div class  alert alert-success  gt target element is visible on screen lt  div gt        log info              else               log   html   lt div class  alert  gt target element is not visible on screen lt  div gt        log info           window  scroll function       bind window scroll event if      target   length  gt  0        if target element exists in DOM     if      target   is on screen          if target element is visible on screen after DOM loaded             log   html   lt div class  alert alert-success  gt target element is visible on screen lt  div gt        log info       else               log   html   lt div class  alert  gt target element is not visible on screen lt  div gt        log info              lt  script gt    See it in JSFiddle

User · Answer

Here is a way to achieve the same thing using Mootools  in horizontal  vertical or both   Element implement   inVerticalView  function  full        if  typeOf full       null             full   true             if  this getStyle  display        none             return false                Window Size and Scroll     var windowScroll   window getScroll        var windowSize   window getSize           Element Size and Scroll     var elementPosition   this getPosition        var elementSize   this getSize            Calculation Variables     var docViewTop   windowScroll y      var docViewBottom   docViewTop   windowSize y      var elemTop   elementPosition y      var elemBottom   elemTop   elementSize y       if  full            return   elemBottom  gt   docViewTop   amp  amp   elemTop  lt   docViewBottom               amp  amp   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop           else           return   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop             inHorizontalView  function full        if  typeOf full       null             full   true             if  this getStyle  display        none             return false                Window Size and Scroll     var windowScroll   window getScroll        var windowSize   window getSize           Element Size and Scroll     var elementPosition   this getPosition        var elementSize   this getSize            Calculation Variables     var docViewLeft   windowScroll x      var docViewRight   docViewLeft   windowSize x      var elemLeft   elementPosition x      var elemRight   elemLeft   elementSize x       if  full            return   elemRight  gt   docViewLeft   amp  amp   elemLeft  lt   docViewRight               amp  amp   elemRight  lt   docViewRight   amp  amp   elemLeft  gt   docViewLeft           else           return   elemRight  lt   docViewRight   amp  amp   elemLeft  gt   docViewLeft             inView  function full        return this inHorizontalView full   amp  amp  this inVerticalView full

User · Answer

Javascript only     function isInViewport element      var rect   element getBoundingClientRect      var html   document documentElement    return       rect top  gt   0  amp  amp      rect left  gt   0  amp  amp      rect bottom  lt    window innerHeight    html clientHeight   amp  amp      rect right  lt    window innerWidth    html clientWidth

User · Answer

Update  use IntersectionObserver    The best method I have found so far is the jQuery appear plugin  Works like a charm      Mimics a custom  appear  event  which fires when an element scrolls into view or otherwise becomes visible to the user       foo   appear function         this  text  Hello world              This plugin can be used to prevent unnecessary requests for content that s hidden or outside the viewable area

User · Answer

Here s my pure JavaScript solution that works if it s hidden inside a scrollable container too   Demo here  try resizing the window too   var visibleY   function el     var rect   el getBoundingClientRect    top   rect top  height   rect height       el   el parentNode      Check if bottom of the element is off the page   if  rect bottom  lt  0  return false      Check its within the document viewport   if  top  gt  document documentElement clientHeight  return false   do       rect   el getBoundingClientRect       if  top  lt   rect bottom     false  return false        Check if the element is out of view due to a container scrolling     if   top   height   lt   rect top  return false     el   el parentNode     while  el    document body    return true      EDIT 2016-03-26  I ve updated the solution to account for scrolling past the element so it s hidden above the top of the scroll-able container  EDIT 2018-10-08  Updated to handle when scrolled out of view above the screen

User · Answer

Checks if the element is on screen at all  rather than the accepted answer s approach that checks if the div is entirely on the screen  which won t work if div is bigger than the screen   In pure Javascript          Checks if element is on the screen  Y axis only   returning true    even if the element is only partially on screen         param element     returns  boolean      function isOnScreenY element        var screen top position   window scrollY      var screen bottom position   screen top position   window innerHeight       var element top position   element offsetTop      var element bottom position   element top position   element offsetHeight       return  inRange element top position  screen top position  screen bottom position         inRange element bottom position  screen top position  screen bottom position              Checks if x is in range  in-between  the    value of a and b  in that order   Also returns true    if equal to either value         param x     param a     param b     returns  boolean      function inRange x  a  b        return  x  gt   a  amp  amp  x  lt   b

User · Answer

This should do the trick   function isScrolledIntoView elem        var docViewTop     window  scrollTop        var docViewBottom   docViewTop     window  height         var elemTop     elem  offset   top      var elemBottom   elemTop     elem  height         return   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop        Simple Utility Function This will allow you to call a utility function that accepts the element you re looking for and if you want the element to be fully in view or partially   function Utils         Utils prototype         constructor  Utils      isElementInView  function  element  fullyInView            var pageTop     window  scrollTop            var pageBottom   pageTop     window  height            var elementTop     element  offset   top          var elementBottom   elementTop     element  height             if  fullyInView     true                return   pageTop  lt  elementTop   amp  amp   pageBottom  gt  elementBottom              else               return   elementTop  lt   pageBottom   amp  amp   elementBottom  gt   pageTop                        var Utils   new Utils      Usage  var isElementInView   Utils isElementInView     flyout-left-container    false    if  isElementInView        console log  in view      else       console log  out of view

User · Answer

I needed to check visibility in elements inside scrollable DIV container        p   DIV container scrollable       e   element     function visible in container p  e            var z   p getBoundingClientRect            var r   e getBoundingClientRect                Check style visiblilty and off-limits         return e style opacity  gt  0  amp  amp  e style display      none   amp  amp                 e style visibility      hidden   amp  amp                   r top  gt  z bottom    r bottom  lt  z top                     r left  gt  z right    r right  lt  z left

User · Answer

Most answers here don t take into account that an element can also be hidden because it is scrolled out of view of a div  not only of the whole page   To cover that possibility  you basically have to check if the element is positioned inside the bounds of each of its parents   This solution does exactly that   function element  percentX  percentY       var tolerance   0 01      needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals     if percentX    null           percentX   100            if percentY    null           percentY   100             var elementRect   element getBoundingClientRect        var parentRects            while element parentElement    null           parentRects push element parentElement getBoundingClientRect             element   element parentElement             var visibleInAllParents   parentRects every function parentRect           var visiblePixelX   Math min elementRect right  parentRect right  - Math max elementRect left  parentRect left           var visiblePixelY   Math min elementRect bottom  parentRect bottom  - Math max elementRect top  parentRect top           var visiblePercentageX   visiblePixelX   elementRect width   100          var visiblePercentageY   visiblePixelY   elementRect height   100          return visiblePercentageX   tolerance  gt  percentX  amp  amp  visiblePercentageY   tolerance  gt  percentY              return visibleInAllParents       It also lets you specify to what percentage it has to be visible in each direction  It doesn t cover the possibility that it may be hidden due to other factors  like display  hidden   This should work in all major browsers  since it only uses getBoundingClientRect  I personally tested it in Chrome and Internet Explorer 11

User · Answer

The only plugin which works consistently for me for doing this  is  https   github com customd jquery-visible  I ported this plugin to GWT recently since I didn t want to add jquery as a dependency just for using the plugin  Here s my  simple  port  just including the functionality that I need for my use case    public static boolean isVisible Element e          vp   viewPort  b   bottom  l   left  t   top  r   right     int vpWidth     Window getClientWidth        int vpHeight   Window getClientHeight          boolean tViz     e getAbsoluteTop    gt   0  amp  amp  e getAbsoluteTop   lt   vpHeight       boolean bViz    e getAbsoluteBottom    gt   0  amp  amp  e getAbsoluteBottom    lt   vpHeight       boolean lViz    e getAbsoluteLeft    gt   0  amp  amp  e getAbsoluteLeft    lt  vpWidth       boolean rViz    e getAbsoluteRight     gt   0  amp  amp  e getAbsoluteRight     lt   vpWidth        boolean vVisible     tViz  amp  amp  bViz      boolean hVisible     lViz  amp  amp  rViz       return hVisible  amp  amp  vVisible

User · Answer

Modified the accepted answer so that the element has to have it s display property set to something other than  none  to quality as visible   function isScrolledIntoView elem       var docViewTop     window  scrollTop      var docViewBottom   docViewTop     window  height       var elemTop     elem  offset   top    var elemBottom   elemTop     elem  height      var elemDisplayNotNone     elem  css  display        none      return   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop   amp  amp  elemDisplayNotNone

User · Answer

After running around unproductively to and using several codes that didn t work  This is what worked for me on vertical scroll visibility using Jquery  Replce   footerplace  with the element you d like to track vertically   jQuery expr filters offscreen   function el      var rect   el getBoundingClientRect      console log rect    console log  window height     window  height        return               rect top  lt     window  height     amp  amp   rect bottom  lt     window  height                     document  scroll function        if      footerplace   is   offscreen           console log  this is true            footerplace   is   offscreen          else        console log  this is false            footerplace   is   offscreen

User · Answer

Here s my pure JavaScript solution that works if it s hidden inside a scrollable container too   Demo here  try resizing the window too   var visibleY   function el     var rect   el getBoundingClientRect    top   rect top  height   rect height       el   el parentNode      Check if bottom of the element is off the page   if  rect bottom  lt  0  return false      Check its within the document viewport   if  top  gt  document documentElement clientHeight  return false   do       rect   el getBoundingClientRect       if  top  lt   rect bottom     false  return false        Check if the element is out of view due to a container scrolling     if   top   height   lt   rect top  return false     el   el parentNode     while  el    document body    return true      EDIT 2016-03-26  I ve updated the solution to account for scrolling past the element so it s hidden above the top of the scroll-able container  EDIT 2018-10-08  Updated to handle when scrolled out of view above the screen

User · Answer

Made a simple plugin detecting if element is visible within a scrollable container        fn isVisible   function           var win        if  arguments 0                   console error  Specify a target             return false                else                 win     arguments 0                  var viewport             var bounds   this offset          bounds right   bounds left   this outerWidth          bounds bottom   bounds top   this outerHeight          viewport bottom   win height     win offset   top        return     bounds top  gt  viewport bottom   amp  amp   win offset   top  lt  bounds bottom             Call it like this    elem to check   isVisible  scrollable container     Hope it ll help

User · Answer

isScrolledIntoView is a very needful function  so I tried it  it works for elements not heigher than the viewport  but if the element is bigger as the viewport it does not work  To fix this easily change the condition   return   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop      to this   return  docViewBottom  gt   elemTop  amp  amp  docViewTop  lt   elemBottom     See demo here  http   jsfiddle net RRSmQ

User · Answer

Update  use IntersectionObserver    The best method I have found so far is the jQuery appear plugin  Works like a charm      Mimics a custom  appear  event  which fires when an element scrolls into view or otherwise becomes visible to the user       foo   appear function         this  text  Hello world              This plugin can be used to prevent unnecessary requests for content that s hidden or outside the viewable area

User · Answer

Made a simple plugin detecting if element is visible within a scrollable container        fn isVisible   function           var win        if  arguments 0                   console error  Specify a target             return false                else                 win     arguments 0                  var viewport             var bounds   this offset          bounds right   bounds left   this outerWidth          bounds bottom   bounds top   this outerHeight          viewport bottom   win height     win offset   top        return     bounds top  gt  viewport bottom   amp  amp   win offset   top  lt  bounds bottom             Call it like this    elem to check   isVisible  scrollable container     Hope it ll help

User · Answer

I needed to check visibility in elements inside scrollable DIV container        p   DIV container scrollable       e   element     function visible in container p  e            var z   p getBoundingClientRect            var r   e getBoundingClientRect                Check style visiblilty and off-limits         return e style opacity  gt  0  amp  amp  e style display      none   amp  amp                 e style visibility      hidden   amp  amp                   r top  gt  z bottom    r bottom  lt  z top                     r left  gt  z right    r right  lt  z left

User · Answer

Building off of this great answer  you can simplify it a little further using ES2015    function isScrolledIntoView el      const   top  bottom     el getBoundingClientRect     return top  gt   0  amp  amp  bottom  lt   window innerHeight     If you don t care about the top going out of the window and just care that the bottom has been viewed  this can be simplified to  function isSeen el      return el getBoundingClientRect   bottom  lt   window innerHeight     or even the one-liner  const isSeen   el   gt  el getBoundingClientRect   bottom  lt   window innerHeight

User · Answer

WebResourcesDepot wrote a script to load while scrolling that uses jQuery some time ago  You can view their Live Demo Here  The beef of their functionality was this     window  scroll function      if     window  scrollTop        document  height   -   window  height         lastAddedLiveFunc             function lastAddedLiveFunc           div lastPostsLoader   html   lt img src  images bigLoader gif  gt         post  default asp action getLastPosts amp lastPostID       wrdLatest last   attr  id        function data           if  data                        wrdLatest last   after data                               div lastPostsLoader   empty

User · Answer

I was looking for a way to see if the element is going to come into view soon  so by extending the snippets above i managed to do it  thought i would leave this here just in case it will help someone  elm   is the element you want to check is in the view  scrollElement   you can pass window or a parent element that has a scroll  offset   if you want it to fire when the element is 200px away before its in the screen then pass 200    x000D   x000D  function isScrolledIntoView elem  scrollElement  offset  x000D            x000D              var  elem     elem   x000D              var  window     scrollElement   x000D              var docViewTop    window scrollTop    x000D              var docViewBottom   docViewTop    window height    x000D              var elemTop    elem offset   top  x000D              var elemBottom   elemTop    elem height    x000D               x000D              return    elemBottom offset   gt   docViewBottom   amp  amp    elemTop-offset   lt   docViewTop         elemBottom-offset   lt   docViewBottom   amp  amp    elemTop offset   gt   docViewTop    x000D            x000D   x000D   x000D

User · Answer

function isScrolledIntoView elem        var docViewTop     window  scrollTop            docViewBottom   docViewTop     window  height            elemTop     elem  offset   top       elemBottom   elemTop     elem  height         Is more than half of the element visible    return   elemTop     elemBottom - elemTop  2    gt   docViewTop  amp  amp    elemTop     elemBottom - elemTop  2    lt   docViewBottom

User · Answer

This answer in Vanilla   function isScrolledIntoView el        var rect   el getBoundingClientRect        var elemTop   rect top      var elemBottom   rect bottom          Only completely visible elements return true      var isVisible    elemTop  gt   0   amp  amp   elemBottom  lt   window innerHeight          Partially visible elements return true        isVisible   elemTop  lt  window innerHeight  amp  amp  elemBottom  gt   0      return isVisible

User · Answer

jQuery Waypoints plugin goes very nice here       entry   waypoint function        alert  You have scrolled to an entry           There are some examples on the site of the plugin

User · Answer

Simple modification for scrollable div  container   var isScrolledIntoView   function elem  container        var containerHeight     container  height        var elemTop     elem  position   top      var elemBottom   elemTop     elem  height        return  elemBottom  gt  0  amp  amp  elemTop  lt  containerHeight       NOTE  this does not work if the element is larger than the scrollable div

User · Answer

Tweeked Scott Dowding s cool function for my requirement-  this is used for finding if the element has just scrolled into the screen i e it s top edge    function isScrolledIntoView elem        var docViewTop     window  scrollTop        var docViewBottom   docViewTop     window  height        var elemTop     elem  offset   top      return   elemTop  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop

User · Answer

An example based off of this answer to check if an element is 75  visible  i e  less than 25  of it is off of the screen    function isScrolledIntoView el         check for 75  visible   var percentVisible   0 75    var elemTop   el getBoundingClientRect   top    var elemBottom   el getBoundingClientRect   bottom    var elemHeight   el getBoundingClientRect   height    var overhang   elemHeight    1 - percentVisible      var isVisible    elemTop  gt   -overhang   amp  amp   elemBottom  lt   window innerHeight   overhang     return isVisible

User · Answer

This considers any padding  border or margin the element has as well as elements larger than the viewport itself   function inViewport  ele        var lBound     window  scrollTop            uBound   lBound     window  height            top    ele offset   top          bottom   top    ele outerHeight true        return  top  gt  lBound  amp  amp  top  lt  uBound              bottom  gt  lBound  amp  amp  bottom  lt  uBound              lBound  gt   top  amp  amp  lBound  lt   bottom              uBound  gt   top  amp  amp  uBound  lt   bottom       To call it use something like this   var  myElement       my-element        canUserSeeIt   inViewport  myElement    console log canUserSeeIt      true  if element is visible  false otherwise

User · Answer

I adapted this short jQuery function extension  which you can feel free to use  MIT licence           returns true if an element is visible  with decent performance     param  scope  scope of the render-window instance  default  window     returns  boolean      jQuery fn isOnScreen   function scope       var element   this      if  element           return            var target     element       if target is   visible      false           return false            scope     scope    window       var top   scope scrollTop        var bot   top   scope height        var elTop   target offset   top      var elBot   elTop   target height         return   elBot  lt   bot   amp  amp   elTop  gt   top

User · Answer

Using IntersectionObserver API  native in modern browsers   It s easy  amp  efficient to determine if an element is visible in the viewport  or in any scrollable container  by using an observer  The need to attach a scroll event and manually checking on the event callback is eliminated  which is more efficient   x000D   x000D     this is the target which is observed var target   document querySelector  div       configure the intersection observer instance var intersectionObserverOptions       root  null       default is the viewport   threshold   5    percentage of the taregt visible area which will trigger  onIntersection         var observer   new IntersectionObserver onIntersection  intersectionObserverOptions      called when target is fully visible function onIntersection entries  opts     entries forEach entry   gt        var visible   entry intersectionRatio  gt   opts thresholds 0           console clear        console log entry intersectionRatio toFixed 2   visible           target classList toggle  visible   visible             provide the observer with a target observer observe target      To stop watching  do     observer unobserve entry target  x000D  span  position fixed  top 0  left 0     box  width 100px  height 100px  background red  margin 1000px  transition  5s     box visible  background green    x000D   lt span gt Scroll both Vertically  amp amp  Horizontally    lt  span gt   lt div class  box  gt  lt  div gt  x000D   x000D   x000D    View browsers support table  not supported in IE Safari

User · Answer

function isScrolledIntoView elem        var docViewTop     window  scrollTop            docViewBottom   docViewTop     window  height            elemTop     elem  offset   top       elemBottom   elemTop     elem  height         Is more than half of the element visible    return   elemTop     elemBottom - elemTop  2    gt   docViewTop  amp  amp    elemTop     elemBottom - elemTop  2    lt   docViewBottom

User · Answer

We can do something like this in modern browsers using ES6   const isFullySeen   el   gt  el  amp  amp    typeof el getBoundingClientRect      function   amp  amp    el getBoundingClientRect    bottom     window scrollY  lt        window innerHeight   window scrollY  amp  amp     el getBoundingClientRect    top     window scrollY  lt        window innerHeight   window scrollY

User · Answer

Modified the accepted answer so that the element has to have it s display property set to something other than  none  to quality as visible   function isScrolledIntoView elem       var docViewTop     window  scrollTop      var docViewBottom   docViewTop     window  height       var elemTop     elem  offset   top    var elemBottom   elemTop     elem  height      var elemDisplayNotNone     elem  css  display        none      return   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop   amp  amp  elemDisplayNotNone

User · Answer

Simple modification for scrollable div  container   var isScrolledIntoView   function elem  container        var containerHeight     container  height        var elemTop     elem  position   top      var elemBottom   elemTop     elem  height        return  elemBottom  gt  0  amp  amp  elemTop  lt  containerHeight       NOTE  this does not work if the element is larger than the scrollable div

User · Answer

There are over 30 answers to this question  and none of them use the amazingly simple  pure JS solution that I have been using  There is no need to load jQuery just to solve this  as many others are pushing   In order to tell if the element is within the viewport  we must first determine the elements position within the body  We do not need to do this recursively as I once thought  Instead  we can use element getBoundingClientRect     pos   elem getBoundingClientRect   top - document body getBoundingClientRect   top    This value is the Y difference between the top of the object and the top of the body   We then must tell if the element is within view  Most implementations ask if the full element is within the viewport  so this is what we shall cover   First of all  the top position of the window is  window scrollY   We can get the bottom position of the window by adding the window s height to its top position   var window bottom position   window scrollY   window innerHeight    Lets create a simple function for getting the element s top position   function getElementWindowTop elem       return elem  amp  amp  typeof elem getBoundingClientRect      function    elem getBoundingClientRect   top - document body getBoundingClientRect   top   0      This function will return the element s top position within the window or it will return 0 if you pass it something other than an element with the  getBoundingClientRect   method  This method has been around for a long time  so you shouldn t have to worry about your browser not supporting it   Now  our element s top position is   var element top position   getElementWindowTop element     And or element s bottom position is   var element bottom position   element top position   element clientHeight    Now we can determine if the element is within the viewport by checking if the element s bottom position is lower than the viewport s top position and by checking if the element s top position is higher than the viewport s bottom position   if element bottom position  gt   window scrollY   amp  amp  element top position  lt   window bottom position         element is in view else       element is not in view   From there  you can perform the logic to add or remove an in-view class on your element  which you can then handle later with transition effects in your CSS   I am absolutely amazed that I did not find this solution anywhere else  but I do believe that this is the cleanest and most effective solution  and it doesn t require you to load jQuery

User · Answer

WebResourcesDepot wrote a script to load while scrolling that uses jQuery some time ago  You can view their Live Demo Here  The beef of their functionality was this     window  scroll function      if     window  scrollTop        document  height   -   window  height         lastAddedLiveFunc             function lastAddedLiveFunc           div lastPostsLoader   html   lt img src  images bigLoader gif  gt         post  default asp action getLastPosts amp lastPostID       wrdLatest last   attr  id        function data           if  data                        wrdLatest last   after data                               div lastPostsLoader   empty

User · Answer

I just wanted to share that I combined this with my script to move the div so that it always stays in view           accordion   on  click     subLink   function            var url     this  attr  src            updateFrame url           scrollIntoView                   window  scroll function                changePos               function scrollIntoView               var docViewTop     window  scrollTop            var docViewBottom   docViewTop     window  height                var elemTop       divPos   offset   top          var elemBottom   elemTop       divPos   height                           if  elemTop  lt  docViewTop                   divPos   offset  top docViewTop                       function changePos                var scrTop     window  scrollTop        var frmHeight       divPos   height           if   scrTop  lt  200      frmHeight  gt  800                    divPos   attr  style   position absolute              else                divPos   attr  style   position fixed top 5px

User · Answer

Most answers here don t take into account that an element can also be hidden because it is scrolled out of view of a div  not only of the whole page   To cover that possibility  you basically have to check if the element is positioned inside the bounds of each of its parents   This solution does exactly that   function element  percentX  percentY       var tolerance   0 01      needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals     if percentX    null           percentX   100            if percentY    null           percentY   100             var elementRect   element getBoundingClientRect        var parentRects            while element parentElement    null           parentRects push element parentElement getBoundingClientRect             element   element parentElement             var visibleInAllParents   parentRects every function parentRect           var visiblePixelX   Math min elementRect right  parentRect right  - Math max elementRect left  parentRect left           var visiblePixelY   Math min elementRect bottom  parentRect bottom  - Math max elementRect top  parentRect top           var visiblePercentageX   visiblePixelX   elementRect width   100          var visiblePercentageY   visiblePixelY   elementRect height   100          return visiblePercentageX   tolerance  gt  percentX  amp  amp  visiblePercentageY   tolerance  gt  percentY              return visibleInAllParents       It also lets you specify to what percentage it has to be visible in each direction  It doesn t cover the possibility that it may be hidden due to other factors  like display  hidden   This should work in all major browsers  since it only uses getBoundingClientRect  I personally tested it in Chrome and Internet Explorer 11

User · Answer

There is a plugin for jQuery called inview which adds a new  inview  event     Here is some code for a jQuery plugin that doesn t use events     extend   expr            inView  function a            var st    document documentElement scrollTop    document body scrollTop               ot     a  offset   top              wh    window innerHeight  amp  amp  window innerHeight  lt    window  height      window innerHeight     window  height            return ot  gt  st  amp  amp     a  height     ot   lt   st   wh               function              fn inView   function             var st    document documentElement scrollTop    document body scrollTop           ot     this  offset   top          wh    window innerHeight  amp  amp  window innerHeight  lt    window  height      window innerHeight     window  height             return ot  gt  st  amp  amp     this  height     ot   lt   st   wh              jQuery      I found this in a comment here   http   remysharp com 2009 01 26 element-in-view-event-plugin    by a bloke called James

User · Answer

I was looking for a way to see if the element is going to come into view soon  so by extending the snippets above i managed to do it  thought i would leave this here just in case it will help someone  elm   is the element you want to check is in the view  scrollElement   you can pass window or a parent element that has a scroll  offset   if you want it to fire when the element is 200px away before its in the screen then pass 200    x000D   x000D  function isScrolledIntoView elem  scrollElement  offset  x000D            x000D              var  elem     elem   x000D              var  window     scrollElement   x000D              var docViewTop    window scrollTop    x000D              var docViewBottom   docViewTop    window height    x000D              var elemTop    elem offset   top  x000D              var elemBottom   elemTop    elem height    x000D               x000D              return    elemBottom offset   gt   docViewBottom   amp  amp    elemTop-offset   lt   docViewTop         elemBottom-offset   lt   docViewBottom   amp  amp    elemTop offset   gt   docViewTop    x000D            x000D   x000D   x000D

User · Answer

We can do something like this in modern browsers using ES6   const isFullySeen   el   gt  el  amp  amp    typeof el getBoundingClientRect      function   amp  amp    el getBoundingClientRect    bottom     window scrollY  lt        window innerHeight   window scrollY  amp  amp     el getBoundingClientRect    top     window scrollY  lt        window innerHeight   window scrollY

User · Answer

A more efficient version of this answer           Is element within visible region of a scrollable container     param  HTMLElement  el - element to test     returns  boolean  true if within visible region  otherwise false      function isScrolledIntoView el          var rect   el getBoundingClientRect          return  rect top  gt   0   amp  amp   rect bottom  lt   window innerHeight

User · Answer

Checks if the element is on screen at all  rather than the accepted answer s approach that checks if the div is entirely on the screen  which won t work if div is bigger than the screen   In pure Javascript          Checks if element is on the screen  Y axis only   returning true    even if the element is only partially on screen         param element     returns  boolean      function isOnScreenY element        var screen top position   window scrollY      var screen bottom position   screen top position   window innerHeight       var element top position   element offsetTop      var element bottom position   element top position   element offsetHeight       return  inRange element top position  screen top position  screen bottom position         inRange element bottom position  screen top position  screen bottom position              Checks if x is in range  in-between  the    value of a and b  in that order   Also returns true    if equal to either value         param x     param a     param b     returns  boolean      function inRange x  a  b        return  x  gt   a  amp  amp  x  lt   b

User · Answer

Here is a way to achieve the same thing using Mootools  in horizontal  vertical or both   Element implement   inVerticalView  function  full        if  typeOf full       null             full   true             if  this getStyle  display        none             return false                Window Size and Scroll     var windowScroll   window getScroll        var windowSize   window getSize           Element Size and Scroll     var elementPosition   this getPosition        var elementSize   this getSize            Calculation Variables     var docViewTop   windowScroll y      var docViewBottom   docViewTop   windowSize y      var elemTop   elementPosition y      var elemBottom   elemTop   elementSize y       if  full            return   elemBottom  gt   docViewTop   amp  amp   elemTop  lt   docViewBottom               amp  amp   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop           else           return   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop             inHorizontalView  function full        if  typeOf full       null             full   true             if  this getStyle  display        none             return false                Window Size and Scroll     var windowScroll   window getScroll        var windowSize   window getSize           Element Size and Scroll     var elementPosition   this getPosition        var elementSize   this getSize            Calculation Variables     var docViewLeft   windowScroll x      var docViewRight   docViewLeft   windowSize x      var elemLeft   elementPosition x      var elemRight   elemLeft   elementSize x       if  full            return   elemRight  gt   docViewLeft   amp  amp   elemLeft  lt   docViewRight               amp  amp   elemRight  lt   docViewRight   amp  amp   elemLeft  gt   docViewLeft           else           return   elemRight  lt   docViewRight   amp  amp   elemLeft  gt   docViewLeft             inView  function full        return this inHorizontalView full   amp  amp  this inVerticalView full

User · Answer

You can make use of jquery plugin  onScreen  to check if the element is in the current viewport when you scroll  The plugin sets the   onScreen  of the selector to true when the selector appears on the screen  This is the link for the plugin which you can include in your project       http   benpickles github io onScreen jquery onscreen min js   You can try the below example which works for me     document  scroll function         if     div2   is   onScreen              console log  Element appeared on Screen              do all your stuffs here when element is visible            else           console log  Element not on Screen              do all your stuffs here when element is not visible              HTML Code    lt div id  div1  style  width  400px  height  1000px  padding-top  20px  position  relative  top  45px  gt  lt  div gt   lt br gt   lt hr   gt   lt br gt   lt div id  div2  style  width  400px  height  200px  gt  lt  div gt    CSS    div1       background-color  red     div2       background-color  green

User · Answer

This answer in Vanilla   function isScrolledIntoView el        var rect   el getBoundingClientRect        var elemTop   rect top      var elemBottom   rect bottom          Only completely visible elements return true      var isVisible    elemTop  gt   0   amp  amp   elemBottom  lt   window innerHeight          Partially visible elements return true        isVisible   elemTop  lt  window innerHeight  amp  amp  elemBottom  gt   0      return isVisible

User · Answer

WebResourcesDepot wrote a script to load while scrolling that uses jQuery some time ago  You can view their Live Demo Here  The beef of their functionality was this     window  scroll function      if     window  scrollTop        document  height   -   window  height         lastAddedLiveFunc             function lastAddedLiveFunc           div lastPostsLoader   html   lt img src  images bigLoader gif  gt         post  default asp action getLastPosts amp lastPostID       wrdLatest last   attr  id        function data           if  data                        wrdLatest last   after data                               div lastPostsLoader   empty

User · Answer

There are over 30 answers to this question  and none of them use the amazingly simple  pure JS solution that I have been using  There is no need to load jQuery just to solve this  as many others are pushing   In order to tell if the element is within the viewport  we must first determine the elements position within the body  We do not need to do this recursively as I once thought  Instead  we can use element getBoundingClientRect     pos   elem getBoundingClientRect   top - document body getBoundingClientRect   top    This value is the Y difference between the top of the object and the top of the body   We then must tell if the element is within view  Most implementations ask if the full element is within the viewport  so this is what we shall cover   First of all  the top position of the window is  window scrollY   We can get the bottom position of the window by adding the window s height to its top position   var window bottom position   window scrollY   window innerHeight    Lets create a simple function for getting the element s top position   function getElementWindowTop elem       return elem  amp  amp  typeof elem getBoundingClientRect      function    elem getBoundingClientRect   top - document body getBoundingClientRect   top   0      This function will return the element s top position within the window or it will return 0 if you pass it something other than an element with the  getBoundingClientRect   method  This method has been around for a long time  so you shouldn t have to worry about your browser not supporting it   Now  our element s top position is   var element top position   getElementWindowTop element     And or element s bottom position is   var element bottom position   element top position   element clientHeight    Now we can determine if the element is within the viewport by checking if the element s bottom position is lower than the viewport s top position and by checking if the element s top position is higher than the viewport s bottom position   if element bottom position  gt   window scrollY   amp  amp  element top position  lt   window bottom position         element is in view else       element is not in view   From there  you can perform the logic to add or remove an in-view class on your element  which you can then handle later with transition effects in your CSS   I am absolutely amazed that I did not find this solution anywhere else  but I do believe that this is the cleanest and most effective solution  and it doesn t require you to load jQuery

User · Answer

Plain vanilla to check if element  el  is visible in scrollable div  holder  function isElementVisible  el  holder      holder   holder    document body   const   top  bottom  height     el getBoundingClientRect     const holderRect   holder getBoundingClientRect      return top  lt   holderRect top       holderRect top - top  lt   height       bottom - holderRect bottom  lt   height    Usage with jQuery  var el      tr last   get 0   var holder      table   get 0   var isVisible   isScrolledIntoView el  holder

User · Answer

An example based off of this answer to check if an element is 75  visible  i e  less than 25  of it is off of the screen    function isScrolledIntoView el         check for 75  visible   var percentVisible   0 75    var elemTop   el getBoundingClientRect   top    var elemBottom   el getBoundingClientRect   bottom    var elemHeight   el getBoundingClientRect   height    var overhang   elemHeight    1 - percentVisible      var isVisible    elemTop  gt   -overhang   amp  amp   elemBottom  lt   window innerHeight   overhang     return isVisible

User · Answer

I have written a component for the task  designed to handle large numbers of elements extremely fast  to the tune of  lt 10ms for 1000 elements on a slow mobile     It works with every type of scroll container you have access to     window  HTML elements  embedded iframe  spawned child window     and is very flexible in what it detects  full or partial visibility  border box or content box  custom tolerance zone  etc    A huge  mostly auto-generated test suite ensures that it works as advertised  cross-browser   Give it a shot if you like  jQuery isInView  Otherwise  you might find inspiration in the source code  e g  here

User · Answer

This should do the trick   function isScrolledIntoView elem        var docViewTop     window  scrollTop        var docViewBottom   docViewTop     window  height         var elemTop     elem  offset   top      var elemBottom   elemTop     elem  height         return   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop        Simple Utility Function This will allow you to call a utility function that accepts the element you re looking for and if you want the element to be fully in view or partially   function Utils         Utils prototype         constructor  Utils      isElementInView  function  element  fullyInView            var pageTop     window  scrollTop            var pageBottom   pageTop     window  height            var elementTop     element  offset   top          var elementBottom   elementTop     element  height             if  fullyInView     true                return   pageTop  lt  elementTop   amp  amp   pageBottom  gt  elementBottom              else               return   elementTop  lt   pageBottom   amp  amp   elementBottom  gt   pageTop                        var Utils   new Utils      Usage  var isElementInView   Utils isElementInView     flyout-left-container    false    if  isElementInView        console log  in view      else       console log  out of view

User · Answer

I have such a method in my application  but it does not use jQuery      Get the TOP position of a given element     function getPositionTop element       var offset   0      while element            offset    element  offsetTop            element   element offsetParent            return offset        Is a given element is visible or not     function isElementVisible eltId        var elt   document getElementById eltId       if   elt               Element not found          return false               Get the top and bottom position of the given element      var posTop   getPositionTop elt       var posBottom   posTop   elt offsetHeight         Get the top and bottom position of the  visible  part of the window      var visibleTop   document body scrollTop      var visibleBottom   visibleTop   document documentElement offsetHeight      return   posBottom  gt   visibleTop   amp  amp   posTop  lt   visibleBottom        Edit   This method works well for I E   at least version 6   Read the comments for compatibility with FF

User · Answer

I have written a component for the task  designed to handle large numbers of elements extremely fast  to the tune of  lt 10ms for 1000 elements on a slow mobile     It works with every type of scroll container you have access to     window  HTML elements  embedded iframe  spawned child window     and is very flexible in what it detects  full or partial visibility  border box or content box  custom tolerance zone  etc    A huge  mostly auto-generated test suite ensures that it works as advertised  cross-browser   Give it a shot if you like  jQuery isInView  Otherwise  you might find inspiration in the source code  e g  here

User · Answer

The easiest solution I found for this is Intersection Observer API   var observer   new IntersectionObserver function entries        if entries 0  isIntersecting     true          console log  Element has just become visible in screen         threshold   0       observer observe document querySelector   main-container

User · Answer

I have such a method in my application  but it does not use jQuery      Get the TOP position of a given element     function getPositionTop element       var offset   0      while element            offset    element  offsetTop            element   element offsetParent            return offset        Is a given element is visible or not     function isElementVisible eltId        var elt   document getElementById eltId       if   elt               Element not found          return false               Get the top and bottom position of the given element      var posTop   getPositionTop elt       var posBottom   posTop   elt offsetHeight         Get the top and bottom position of the  visible  part of the window      var visibleTop   document body scrollTop      var visibleBottom   visibleTop   document documentElement offsetHeight      return   posBottom  gt   visibleTop   amp  amp   posTop  lt   visibleBottom        Edit   This method works well for I E   at least version 6   Read the comments for compatibility with FF

User · Answer

I added my code modification  Unfortunately  I can see everyone in their version and everyone omits the use of the debance function  Which answer is for your Event not to fire  for example  200 times per second while scrolling    window  scroll function            if  isInView     class                  debounce                  someFunction    5                                     function isInView elem           if document documentElement clientWidth  gt  991               return   elem  offset   top -   window  scrollTop    lt    elem  height             else               doSometing

User · Answer

I have such a method in my application  but it does not use jQuery      Get the TOP position of a given element     function getPositionTop element       var offset   0      while element            offset    element  offsetTop            element   element offsetParent            return offset        Is a given element is visible or not     function isElementVisible eltId        var elt   document getElementById eltId       if   elt               Element not found          return false               Get the top and bottom position of the given element      var posTop   getPositionTop elt       var posBottom   posTop   elt offsetHeight         Get the top and bottom position of the  visible  part of the window      var visibleTop   document body scrollTop      var visibleBottom   visibleTop   document documentElement offsetHeight      return   posBottom  gt   visibleTop   amp  amp   posTop  lt   visibleBottom        Edit   This method works well for I E   at least version 6   Read the comments for compatibility with FF

User · Answer

I have such a method in my application  but it does not use jQuery      Get the TOP position of a given element     function getPositionTop element       var offset   0      while element            offset    element  offsetTop            element   element offsetParent            return offset        Is a given element is visible or not     function isElementVisible eltId        var elt   document getElementById eltId       if   elt               Element not found          return false               Get the top and bottom position of the given element      var posTop   getPositionTop elt       var posBottom   posTop   elt offsetHeight         Get the top and bottom position of the  visible  part of the window      var visibleTop   document body scrollTop      var visibleBottom   visibleTop   document documentElement offsetHeight      return   posBottom  gt   visibleTop   amp  amp   posTop  lt   visibleBottom        Edit   This method works well for I E   at least version 6   Read the comments for compatibility with FF

User · Answer

How about  function isInView elem      return   elem  offset   top -   window  scrollTop    lt    elem  height         After that you can trigger whatever you want once the element is in view like this     window  scroll function       if  isInView     classOfDivToCheck             fire whatever you what        dothis         That works for me just fine

User · Answer

I adapted this short jQuery function extension  which you can feel free to use  MIT licence           returns true if an element is visible  with decent performance     param  scope  scope of the render-window instance  default  window     returns  boolean      jQuery fn isOnScreen   function scope       var element   this      if  element           return            var target     element       if target is   visible      false           return false            scope     scope    window       var top   scope scrollTop        var bot   top   scope height        var elTop   target offset   top      var elBot   elTop   target height         return   elBot  lt   bot   amp  amp   elTop  gt   top

User · Answer

There is a plugin for jQuery called inview which adds a new  inview  event     Here is some code for a jQuery plugin that doesn t use events     extend   expr            inView  function a            var st    document documentElement scrollTop    document body scrollTop               ot     a  offset   top              wh    window innerHeight  amp  amp  window innerHeight  lt    window  height      window innerHeight     window  height            return ot  gt  st  amp  amp     a  height     ot   lt   st   wh               function              fn inView   function             var st    document documentElement scrollTop    document body scrollTop           ot     this  offset   top          wh    window innerHeight  amp  amp  window innerHeight  lt    window  height      window innerHeight     window  height             return ot  gt  st  amp  amp     this  height     ot   lt   st   wh              jQuery      I found this in a comment here   http   remysharp com 2009 01 26 element-in-view-event-plugin    by a bloke called James

User · Answer

Building off of this great answer  you can simplify it a little further using ES2015    function isScrolledIntoView el      const   top  bottom     el getBoundingClientRect     return top  gt   0  amp  amp  bottom  lt   window innerHeight     If you don t care about the top going out of the window and just care that the bottom has been viewed  this can be simplified to  function isSeen el      return el getBoundingClientRect   bottom  lt   window innerHeight     or even the one-liner  const isSeen   el   gt  el getBoundingClientRect   bottom  lt   window innerHeight

User · Answer

Javascript only     function isInViewport element      var rect   element getBoundingClientRect      var html   document documentElement    return       rect top  gt   0  amp  amp      rect left  gt   0  amp  amp      rect bottom  lt    window innerHeight    html clientHeight   amp  amp      rect right  lt    window innerWidth    html clientWidth

User · Answer

If you want to tweak this for scrolling item within another div   function isScrolledIntoView  elem  divID           var docViewTop           divID  scrollTop          var docViewBottom   docViewTop           divID  height         var elemTop     elem  offset   top      var elemBottom   elemTop     elem  height         return   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop

User · Answer

I prefer using jQuery expr  jQuery extend jQuery expr               inview  function  elem            var t     elem           var offset   t offset            var win     window            var winST   win scrollTop            var elHeight   t outerHeight true            if   offset top  gt  winST - elHeight  amp  amp  offset top  lt  winST   elHeight   win height                  return true                            return false                so you can use it this way      my-elem inview      returns only element that is in view     my-elem   is   inview      check if element is in view     my-elem inview   length    check how many elements are in view   You can easly add such code inside scroll event function etc  to check it everytime user will scroll the view

User · Answer

I just wanted to share that I combined this with my script to move the div so that it always stays in view           accordion   on  click     subLink   function            var url     this  attr  src            updateFrame url           scrollIntoView                   window  scroll function                changePos               function scrollIntoView               var docViewTop     window  scrollTop            var docViewBottom   docViewTop     window  height                var elemTop       divPos   offset   top          var elemBottom   elemTop       divPos   height                           if  elemTop  lt  docViewTop                   divPos   offset  top docViewTop                       function changePos                var scrTop     window  scrollTop        var frmHeight       divPos   height           if   scrTop  lt  200      frmHeight  gt  800                    divPos   attr  style   position absolute              else                divPos   attr  style   position fixed top 5px

User · Answer

Tweeked Scott Dowding s cool function for my requirement-  this is used for finding if the element has just scrolled into the screen i e it s top edge    function isScrolledIntoView elem        var docViewTop     window  scrollTop        var docViewBottom   docViewTop     window  height        var elemTop     elem  offset   top      return   elemTop  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop

User · Answer

A more efficient version of this answer           Is element within visible region of a scrollable container     param  HTMLElement  el - element to test     returns  boolean  true if within visible region  otherwise false      function isScrolledIntoView el          var rect   el getBoundingClientRect          return  rect top  gt   0   amp  amp   rect bottom  lt   window innerHeight

User · Answer

The jquery scrollspy plugin will allow you to easily do this  https   github com thesmart jquery-scrollspy      tile   on  scrollSpy enter   function         console log  enter      this  attr  id              tile   on  scrollSpy exit   function         console log  exit      this  attr  id              tile   scrollSpy

User · Answer

Here is another solution from http   web-profile com ua    lt script type  text javascript  gt    fn is on screen   function        var win     window       var viewport             top   win scrollTop            left   win scrollLeft              viewport right   viewport left   win width        viewport bottom   viewport top   win height         var bounds   this offset        bounds right   bounds left   this outerWidth        bounds bottom   bounds top   this outerHeight         return    viewport right  lt  bounds left    viewport left  gt  bounds right       viewport bottom  lt  bounds top    viewport top  gt  bounds bottom         if      target   length  gt  0        if target element exists in DOM     if      target   is on screen          if target element is visible on screen after DOM loaded             log   html   lt div class  alert alert-success  gt target element is visible on screen lt  div gt        log info              else               log   html   lt div class  alert  gt target element is not visible on screen lt  div gt        log info           window  scroll function       bind window scroll event if      target   length  gt  0        if target element exists in DOM     if      target   is on screen          if target element is visible on screen after DOM loaded             log   html   lt div class  alert alert-success  gt target element is visible on screen lt  div gt        log info       else               log   html   lt div class  alert  gt target element is not visible on screen lt  div gt        log info              lt  script gt    See it in JSFiddle

User · Answer

If you want to tweak this for scrolling item within another div   function isScrolledIntoView  elem  divID           var docViewTop           divID  scrollTop          var docViewBottom   docViewTop           divID  height         var elemTop     elem  offset   top      var elemBottom   elemTop     elem  height         return   elemBottom  lt   docViewBottom   amp  amp   elemTop  gt   docViewTop

User · Answer

jQuery Waypoints plugin goes very nice here       entry   waypoint function        alert  You have scrolled to an entry           There are some examples on the site of the plugin

User · Answer

Using IntersectionObserver API  native in modern browsers   It s easy  amp  efficient to determine if an element is visible in the viewport  or in any scrollable container  by using an observer  The need to attach a scroll event and manually checking on the event callback is eliminated  which is more efficient   x000D   x000D     this is the target which is observed var target   document querySelector  div       configure the intersection observer instance var intersectionObserverOptions       root  null       default is the viewport   threshold   5    percentage of the taregt visible area which will trigger  onIntersection         var observer   new IntersectionObserver onIntersection  intersectionObserverOptions      called when target is fully visible function onIntersection entries  opts     entries forEach entry   gt        var visible   entry intersectionRatio  gt   opts thresholds 0           console clear        console log entry intersectionRatio toFixed 2   visible           target classList toggle  visible   visible             provide the observer with a target observer observe target      To stop watching  do     observer unobserve entry target  x000D  span  position fixed  top 0  left 0     box  width 100px  height 100px  background red  margin 1000px  transition  5s     box visible  background green    x000D   lt span gt Scroll both Vertically  amp amp  Horizontally    lt  span gt   lt div class  box  gt  lt  div gt  x000D   x000D   x000D    View browsers support table  not supported in IE Safari

[javascript] How to check if element is visible after scrolling?

Examples related to javascript

Examples related to jquery

Examples related to scroll