How can I tell if a DOM element is visible in the current viewport

Question

Is there an efficient way to tell if a DOM element  in an HTML document  is currently visible  appears in the viewport     The question refers to Firefox

User · Answer

My shorter and faster version   function isElementOutViewport el       var rect   el getBoundingClientRect        return rect bottom  lt  0    rect right  lt  0    rect left  gt  window innerWidth    rect top  gt  window innerHeight      And a jsFiddle as required  https   jsfiddle net on1g619L 1

User · Answer

As a public service   Dan s answer with the correct calculations  element can be   window  especially on mobile phone screens   and correct jQuery testing  as well as adding isElementPartiallyInViewport   By the way  the difference between window innerWidth and document documentElement clientWidth is that clientWidth clientHeight doesn t include the scrollbar  while window innerWidth Height does   function isElementPartiallyInViewport el           Special bonus for those using jQuery     if  typeof jQuery      undefined   amp  amp  el instanceof jQuery           el   el 0        var rect   el getBoundingClientRect           DOMRect   x  8  y  8  width  100  height  100  top  8  right  108  bottom  108  left  8       var windowHeight    window innerHeight    document documentElement clientHeight       var windowWidth    window innerWidth    document documentElement clientWidth           http   stackoverflow com questions 325933 determine-whether-two-date-ranges-overlap     var vertInView    rect top  lt   windowHeight   amp  amp    rect top   rect height   gt   0       var horInView    rect left  lt   windowWidth   amp  amp    rect left   rect width   gt   0        return  vertInView  amp  amp  horInView          http   stackoverflow com questions 123999 how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport function isElementInViewport  el           Special bonus for those using jQuery     if  typeof jQuery      undefined   amp  amp  el instanceof jQuery           el   el 0        var rect   el getBoundingClientRect        var windowHeight    window innerHeight    document documentElement clientHeight       var windowWidth    window innerWidth    document documentElement clientWidth        return               rect left  gt   0           amp  amp   rect top  gt   0           amp  amp    rect left   rect width   lt   windowWidth           amp  amp    rect top   rect height   lt   windowHeight             function fnIsVis ele        var inVpFull   isElementInViewport ele       var inVpPartial   isElementPartiallyInViewport ele       console clear        console log  Fully in viewport      inVpFull       console log  Partially in viewport      inVpPartial       Test-case   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  utf-8  gt       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt       lt meta name  viewport  content  width device-width  initial-scale 1  gt       lt meta name  description  content    gt       lt meta name  author  content    gt       lt title gt Test lt  title gt       lt  --      lt script src  http   cdnjs cloudflare com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt       lt script src  scrollMonitor js  gt  lt  script gt      -- gt        lt script type  text javascript  gt           function isElementPartiallyInViewport el                           Special bonus for those using jQuery             if  typeof jQuery      undefined   amp  amp  el instanceof jQuery                   el   el 0                var rect   el getBoundingClientRect                   DOMRect   x  8  y  8  width  100  height  100  top  8  right  108  bottom  108  left  8               var windowHeight    window innerHeight    document documentElement clientHeight               var windowWidth    window innerWidth    document documentElement clientWidth                   http   stackoverflow com questions 325933 determine-whether-two-date-ranges-overlap             var vertInView    rect top  lt   windowHeight   amp  amp    rect top   rect height   gt   0               var horInView    rect left  lt   windowWidth   amp  amp    rect left   rect width   gt   0                return  vertInView  amp  amp  horInView                          http   stackoverflow com questions 123999 how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport         function isElementInViewport  el                           Special bonus for those using jQuery             if  typeof jQuery      undefined   amp  amp  el instanceof jQuery                   el   el 0                var rect   el getBoundingClientRect                var windowHeight    window innerHeight    document documentElement clientHeight               var windowWidth    window innerWidth    document documentElement clientWidth                return                       rect left  gt   0                   amp  amp   rect top  gt   0                   amp  amp    rect left   rect width   lt   windowWidth                   amp  amp    rect top   rect height   lt   windowHeight                                     function fnIsVis ele                        var inVpFull   isElementInViewport ele               var inVpPartial   isElementPartiallyInViewport ele               console clear                console log  Fully in viewport      inVpFull               console log  Partially in viewport      inVpPartial                          var scrollLeft    window pageXOffset     undefined    window pageXOffset    document documentElement    document body parentNode    document body  scrollLeft             var scrollTop    window pageYOffset     undefined    window pageYOffset    document documentElement    document body parentNode    document body  scrollTop       lt  script gt   lt  head gt    lt body gt       lt div style  display  block  width  2000px  height  10000px  background-color  green   gt            lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt           lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt           lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt            lt input type  button  onclick  fnIsVis document getElementById  myele      value  det    gt            lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt           lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt           lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt            lt div style  background-color  crimson  display  inline-block  width  800px  height  500px    gt  lt  div gt           lt div id  myele  onclick  fnIsVis this    style  display  inline-block  width  100px  height  100px  background-color  hotpink   gt          t          lt  div gt            lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt           lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt           lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt            lt input type  button  onclick  fnIsVis document getElementById  myele      value  det    gt       lt  div gt        lt  --      lt script type  text javascript  gt           var element   document getElementById  myele            var watcher   scrollMonitor create element            watcher lock             watcher stateChange function                 console log  state changed                     element  toggleClass  fixed   this isAboveViewport                   lt  script gt      -- gt   lt  body gt   lt  html gt

User · Answer

Based on dan s solution  I had a go at cleaning up the implementation so that using it multiple times on the same page is easier     function          window  on  load resize scroll   function         addClassToElementInViewport     bug-icon     animate-bug-icon        addClassToElementInViewport     another-thing     animate-thing            repeat as needed              function addClassToElementInViewport element  newClass        if  inViewport element           element addClass newClass                function inViewport element        if  typeof jQuery      function   amp  amp  element instanceof jQuery          element   element 0             var elementBounds   element getBoundingClientRect        return         elementBounds top  gt   0  amp  amp        elementBounds left  gt   0  amp  amp        elementBounds bottom  lt     window  height    amp  amp        elementBounds right  lt     window  width                     The way I m using it is that when the element scrolls into view  I m adding a class that triggers a CSS keyframe animation  It s pretty straightforward and works especially well when you ve got like 10  things to conditionally animate on a page

User · Answer

I found it troubling that there wasn t a jQuery-centric version of the functionality available  When I came across Dan s solution I spied the opportunity to provide something for folks who like to program in the jQuery OO style  It s nice and snappy and works like a charm for me   Bada bing bada boom    fn inView   function        if  this length           return false      var rect   this get 0  getBoundingClientRect         return           rect top  gt   0  amp  amp          rect left  gt   0  amp  amp          rect bottom  lt    window innerHeight    document documentElement clientHeight   amp  amp          rect right  lt    window innerWidth    document documentElement clientWidth                 Additional examples for other use cases    Is true false whether an array of elements are all in view   fn allInView   function        var all           this forEach function            all push    this  inView                  return all indexOf false      -1         Only the class elements in view     some-class   filter function        return   this  inView            Only the class elements not in view     some-class   filter function        return    this  inView          Usage    window  on  scroll  function         if     footer   inView                  Do cool stuff

User · Answer

The simplest solution as the support of Element getBoundingClientRect   has become perfect  function isInView el      let box   el getBoundingClientRect      return box top  lt  window innerHeight  amp  amp  box bottom  gt   0

User · Answer

Here s my solution  It will work if an element is hidden inside a scrollable container   Here s a demo  try re-sizing the window to   var visibleY   function el       var top   el getBoundingClientRect   top  rect  el   el parentNode      do           rect   el getBoundingClientRect            if  top  lt   rect bottom     false              return false          el   el parentNode        while  el    document body          Check it s within the document viewport     return top  lt   document documentElement clientHeight       I only needed to check if it s visible in the Y axis  for a scrolling Ajax load-more-records feature

User · Answer

I use this function  it only checks if the y is inscreen since most of the time the x is not needed     function elementInViewport el        var elinfo              top  el offsetTop           height  el offsetHeight              if  elinfo top   elinfo height  lt  window pageYOffset    elinfo top  gt  window pageYOffset   window innerHeight            return false        else           return true

User · Answer

This is the easy and small solution that has worked for me   Example  You want to see if the element is visible in the parent element that has overflow scroll     window  on  scroll   function            var container       sidebar         var containerHeight   container height         var scrollPosition       row1   offset   top - container offset   top        if  containerHeight  lt  scrollPosition             console log  not visible           else            console log  visible

User · Answer

All answers I ve encountered here only check if the element is positioned inside the current viewport  But that doesn t mean that it is visible  What if the given element is inside a div with overflowing content  and it is scrolled out of view   To solve that  you d have to check if the element is contained by all parents  My solution does exactly that   It also allows you to specify how much of the element has to be visible   Element prototype isVisible   function 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   this getBoundingClientRect        var parentRects           var element   this       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       This solution ignored the fact that elements may not be visible due to other facts  like opacity  0    I have tested this solution in Chrome and Internet Explorer 11

User · Answer

The most accepted answers don t work when zooming in Google Chrome on Android  In combination with Dan s answer  to account for Chrome on Android  visualViewport must be used  The following example only takes the vertical check into account and uses jQuery for the window height   var Rect   YOUR ELEMENT getBoundingClientRect    var ElTop   Rect top  ElBottom   Rect bottom  var WindowHeight     window  height    if window visualViewport        ElTop -  window visualViewport offsetTop      ElBottom -  window visualViewport offsetTop      WindowHeight   window visualViewport height    var WithinScreen    ElTop  gt   0  amp  amp  ElBottom  lt   WindowHeight

User · Answer

Most of the usages in previous answers are failing at these points      -When any pixel of an element is visible  but not  a corner        -When an element is bigger than viewport and centered       -Most of them are checking only for a singular element inside a document or window    Well  for all these problems I ve a solution and the plus sides are      -You can return visible when only a pixel from any sides shows up and is not a corner       -You can still return visible while element bigger than viewport       -You can choose your parent element or you can automatically let it choose       -Works on dynamically added elements too    If you check the snippets below you will see the difference in using overflow-scroll in element s container will not cause any trouble and see that unlike other answers here even if a pixel shows up from any side or when an element is bigger than viewport and we are seeing inner pixels of the element it still works   Usage is simple      For checking element visibility from any sides isVisible element      For checking elements visibility in a parent you would like to check var parent   document     Assuming you check if  element  inside  document  isVisible element  parent      For checking elements visibility even if it s bigger than viewport isVisible element  null  true     Without parent choice isVisible element  parent  true     With parent choice   A demonstration without crossSearchAlgorithm which is usefull for elements bigger than viewport check element3 inner pixels to see    x000D   x000D  function isVisible element  parent  crossSearchAlgorithm    x000D      var rect   element getBoundingClientRect    x000D              prect    parent    undefined    parent getBoundingClientRect     element parentNode getBoundingClientRect    x000D          csa    crossSearchAlgorithm    undefined    crossSearchAlgorithm   false  x000D          efp   function  x  y    return document elementFromPoint x  y     x000D         Return false if it s not in the viewport x000D      if  rect right  lt  prect left    rect bottom  lt  prect top    rect left  gt  prect right    rect top  gt  prect bottom    x000D          return false  x000D        x000D      var flag   false  x000D         Return true if left to right any border pixel reached x000D      for  var x   rect left  x  lt  rect right  x      x000D          if  element contains efp rect top  x      element contains efp rect bottom  x      x000D          flag   true  x000D          break  x000D          x000D        x000D         Return true if top to bottom any border pixel reached x000D      if  flag    false    x000D        for  var y   rect top  y  lt  rect bottom  y      x000D          if  element contains efp rect left  y      element contains efp rect right  y      x000D            flag   true  x000D            break  x000D            x000D          x000D        x000D      if csa    x000D           Another algorithm to check if element is centered and bigger than viewport x000D        if  flag    false    x000D          var x   rect left  x000D          var y   rect top  x000D             From top left to bottom right x000D          while x  lt  rect right    y  lt  rect bottom    x000D            if  element contains efp x y      x000D              flag   true  x000D              break  x000D              x000D            if x  lt  rect right    x      x000D            if y  lt  rect bottom    y      x000D            x000D          if  flag    false    x000D            x   rect right  x000D            y   rect top  x000D               From top right to bottom left x000D            while x  gt  rect left    y  lt  rect bottom    x000D              if  element contains efp x y      x000D                flag   true  x000D                break  x000D                x000D              if x  gt  rect left    x--    x000D              if y  lt  rect bottom    y      x000D              x000D            x000D          x000D        x000D      return flag  x000D    x000D   x000D     Check multiple elements visibility x000D  document getElementById  container   addEventListener  scroll   function     x000D      var elementList   document getElementsByClassName  element    x000D    var console   document getElementById  console    x000D      for  var i 0  i  lt  elementList length  i      x000D           I did not define parent  so it will be element s parent x000D      if  isVisible elementList i      x000D            console innerHTML    Element with id     elementList i  id      is visible    x000D        break  x000D        else   x000D          console innerHTML    Element with id     elementList i  id      is hidden    x000D        x000D      x000D      x000D   x000D     Dynamically added elements x000D  for var i 4  i  lt   6  i      x000D    var newElement   document createElement  div    x000D    newElement id    element    i  x000D    newElement classList add  element    x000D    document getElementById  container   appendChild newElement   x000D    x000D   console   background-color  yellow    x000D   container   x000D    width  300px  x000D    height  100px  x000D    background-color  lightblue  x000D    overflow-y  auto  x000D    padding-top  150px  x000D    margin  45px  x000D    x000D   element   x000D    margin  400px  x000D    width  400px  x000D    height  320px  x000D    background-color  green  x000D    x000D   element3   x000D    position  relative  x000D    margin  40px  x000D    width  720px  x000D    height  520px  x000D    background-color  green  x000D    x000D   element3  before   x000D    content      x000D    position  absolute  x000D    top  -10px  x000D    left  -10px  x000D    margin  0px  x000D    width  740px  x000D    height  540px  x000D    border  5px dotted green  x000D    background  transparent  x000D    x000D   lt div id  console  gt  lt  div gt  x000D   lt div id  container  gt  x000D       lt div id  element1  class  element  gt  lt  div gt  x000D       lt div id  element2  class  element  gt  lt  div gt  x000D       lt div id  element3  class  element  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    You see  when you are inside the element3 it fails to tell if it s visible or not  because we are only checking if the element is visible from sides or corners   And this one includes crossSearchAlgorithm which allows you to still return visible when the element is bigger than the viewport    x000D   x000D  function isVisible element  parent  crossSearchAlgorithm    x000D      var rect   element getBoundingClientRect    x000D              prect    parent    undefined    parent getBoundingClientRect     element parentNode getBoundingClientRect    x000D          csa    crossSearchAlgorithm    undefined    crossSearchAlgorithm   false  x000D          efp   function  x  y    return document elementFromPoint x  y     x000D         Return false if it s not in the viewport x000D      if  rect right  lt  prect left    rect bottom  lt  prect top    rect left  gt  prect right    rect top  gt  prect bottom    x000D          return false  x000D        x000D      var flag   false  x000D         Return true if left to right any border pixel reached x000D      for  var x   rect left  x  lt  rect right  x      x000D          if  element contains efp rect top  x      element contains efp rect bottom  x      x000D          flag   true  x000D          break  x000D          x000D        x000D         Return true if top to bottom any border pixel reached x000D      if  flag    false    x000D        for  var y   rect top  y  lt  rect bottom  y      x000D          if  element contains efp rect left  y      element contains efp rect right  y      x000D            flag   true  x000D            break  x000D            x000D          x000D        x000D      if csa    x000D           Another algorithm to check if element is centered and bigger than viewport x000D        if  flag    false    x000D          var x   rect left  x000D          var y   rect top  x000D             From top left to bottom right x000D          while x  lt  rect right    y  lt  rect bottom    x000D            if  element contains efp x y      x000D              flag   true  x000D              break  x000D              x000D            if x  lt  rect right    x      x000D            if y  lt  rect bottom    y      x000D            x000D          if  flag    false    x000D            x   rect right  x000D            y   rect top  x000D               From top right to bottom left x000D            while x  gt  rect left    y  lt  rect bottom    x000D              if  element contains efp x y      x000D                flag   true  x000D                break  x000D                x000D              if x  gt  rect left    x--    x000D              if y  lt  rect bottom    y      x000D              x000D            x000D          x000D        x000D      return flag  x000D    x000D   x000D     Check multiple elements visibility x000D  document getElementById  container   addEventListener  scroll   function     x000D      var elementList   document getElementsByClassName  element    x000D    var console   document getElementById  console    x000D      for  var i 0  i  lt  elementList length  i      x000D           I did not define parent so it will be element s parent x000D         and it will do crossSearchAlgorithm x000D      if  isVisible elementList i  null true     x000D            console innerHTML    Element with id     elementList i  id      is visible    x000D        break  x000D        else   x000D          console innerHTML    Element with id     elementList i  id      is hidden    x000D        x000D      x000D      x000D     Dynamically added elements x000D  for var i 4  i  lt   6  i      x000D    var newElement   document createElement  div    x000D    newElement id    element    i  x000D    newElement classList add  element    x000D    document getElementById  container   appendChild newElement   x000D    x000D   console   background-color  yellow    x000D   container   x000D    width  300px  x000D    height  100px  x000D    background-color  lightblue  x000D    overflow-y  auto  x000D    padding-top  150px  x000D    margin  45px  x000D    x000D   element   x000D    margin  400px  x000D    width  400px  x000D    height  320px  x000D    background-color  green  x000D    x000D   element3   x000D    position  relative  x000D    margin  40px  x000D    width  720px  x000D    height  520px  x000D    background-color  green  x000D    x000D   element3  before   x000D    content      x000D    position  absolute  x000D    top  -10px  x000D    left  -10px  x000D    margin  0px  x000D    width  740px  x000D    height  540px  x000D    border  5px dotted green  x000D    background  transparent  x000D    x000D   lt div id  console  gt  lt  div gt  x000D   lt div id  container  gt  x000D       lt div id  element1  class  element  gt  lt  div gt  x000D       lt div id  element2  class  element  gt  lt  div gt  x000D       lt div id  element3  class  element  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    JSFiddle to play with  http   jsfiddle net BerkerYuceer grk5az2c   This code is made for more precise information if any part of the element is shown in the view or not  For performance options or only vertical slides  do not use this  This code is more effective in drawing cases

User · Answer

This checks if an element is at least partially in view  vertical dimension    function inView element        var box   element getBoundingClientRect        return inViewBox box      function inViewBox box        return   box bottom  lt  0      box top  gt  getWindowSize   h     false   true      function getWindowSize         return   w  document body offsetWidth    document documentElement offsetWidth    window innerWidth  h  document body offsetHeight    document documentElement offsetHeight    window innerHeight

User · Answer

I had the same question and figured it out by using getBoundingClientRect     This code is completely  generic  and only has to be written once for it to work  you don t have to write it out for each element that you want to know is in the viewport    This code only checks to see if it is vertically in the viewport  not horizontally  In this case  the variable  array   elements  holds all the elements that you are checking to be vertically in the viewport  so grab any elements you want anywhere and store them there   The  for loop   loops through each element and checks to see if it is vertically in the viewport  This code executes every time the user scrolls  If the getBoudingClientRect   top is less than 3 4 the viewport  the element is one quarter in the viewport   it registers as  in the viewport    Since the code is generic  you will want to know  which  element is in the viewport  To find that out  you can determine it by custom attribute  node name  id  class name  and more   Here is my code  tell me if it doesn t work  it has been tested in Internet nbsp Explorer nbsp 11  Firefox 40 0 3  Chrome Version 45 0 2454 85 m  Opera 31 0 1889 174  and Edge with Windows 10   not Safari yet          Scrolling handlers    window onscroll   function      var elements   document getElementById  whatever   getElementsByClassName  whatever      for var i   0  i    elements length  i           if elements i  getBoundingClientRect   top  lt   window innerHeight 0 75  amp  amp        elements i  getBoundingClientRect   top  gt  0             console log elements i  nodeName                           elements i  className                           elements i  id                       is in the viewport  proceed with whatever code you want to do here

User · Answer

Here is a function that tells if an element is in visible in the current viewport of a parent element   function inParentViewport el  pa        if  typeof jQuery      function            if  el instanceof jQuery              el   el 0           if  pa instanceof jQuery              pa   pa 0              var e   el getBoundingClientRect        var p   pa getBoundingClientRect         return           e bottom  gt   p top  amp  amp          e right  gt   p left  amp  amp          e top  lt   p bottom  amp  amp          e left  lt   p right

User · Answer

Update In modern browsers  you might want to check out the Intersection Observer API which provides the following benefits   Better performance than listening for scroll events Works in cross domain iframes Can tell if an element is obstructing intersecting another  Intersection Observer is on its way to being a full-fledged standard and is already supported in Chrome 51   Edge 15  and Firefox 55  and is under development for Safari   There s also a polyfill available   Previous answer There are some issues with the answer provided by Dan that might make it an unsuitable approach for some situations   Some of these issues are pointed out in his answer near the bottom  that his code will give false positives for elements that are   Hidden by another element in front of the one being tested Outside the visible area of a parent or ancestor element An element or its children hidden by using the CSS clip property  These limitations are demonstrated in the following results of a simple test   The solution  isElementVisible   Here s a solution to those problems  with the test result below and an explanation of some parts of the code  function isElementVisible el        var rect       el getBoundingClientRect            vWidth     window innerWidth    document documentElement clientWidth          vHeight    window innerHeight    document documentElement clientHeight          efp        function  x  y    return document elementFromPoint x  y                  Return false if it s not in the viewport     if  rect right  lt  0    rect bottom  lt  0                 rect left  gt  vWidth    rect top  gt  vHeight          return false          Return true if any of its four corners are visible     return             el contains efp rect left   rect top             el contains efp rect right  rect top             el contains efp rect right  rect bottom             el contains efp rect left   rect bottom              Passing test  http   jsfiddle net AndyE cAY8c   And the result   Additional notes This method is not without its own limitations  however  For instance  an element being tested with a lower z-index than another element at the same location would be identified as hidden even if the element in front doesn t actually hide any part of it   Still  this method has its uses in some cases that Dan s solution doesn t cover  Both element getBoundingClientRect   and document elementFromPoint   are part of the CSSOM Working Draft specification and are supported in at least IE 6 and later and most desktop browsers for a long time  albeit  not perfectly   See Quirksmode on these functions for more information  contains   is used to see if the element returned by document elementFromPoint   is a child node of the element we re testing for visibility   It also returns true if the element returned is the same element   This just makes the check more robust   It s supported in all major browsers  Firefox 9 0 being the last of them to add it   For older Firefox support  check this answer s history  If you want to test more points around the element for visibility-ie  to make sure the element isn t covered by more than  say  50 -it wouldn t take much to adjust the last part of the answer   However  be aware that it would probably be very slow if you checked every pixel to make sure it was 100  visible

User · Answer

See the source of verge  which uses getBoundingClientRect  It s like   function inViewport  el         var r  html      if    el    1     el nodeType     return false        html   document documentElement      r   el getBoundingClientRect         return     r        amp  amp  r bottom  gt   0        amp  amp  r right  gt   0        amp  amp  r top  lt   html clientHeight        amp  amp  r left  lt   html clientWidth             It returns true if any part of the element is in the viewport

User · Answer

Update  Time marches on and so have our browsers  This technique is no longer recommended and you should use Dan s solution if you do not need to support version of Internet nbsp Explorer before 7   Original solution  now outdated    This will check if the element is entirely visible in the current viewport   function elementInViewport el      var top   el offsetTop    var left   el offsetLeft    var width   el offsetWidth    var height   el offsetHeight     while el offsetParent        el   el offsetParent      top    el offsetTop      left    el offsetLeft         return       top  gt   window pageYOffset  amp  amp      left  gt   window pageXOffset  amp  amp       top   height   lt    window pageYOffset   window innerHeight   amp  amp       left   width   lt    window pageXOffset   window innerWidth           You could modify this simply to determine if any part of the element is visible in the viewport   function elementInViewport2 el      var top   el offsetTop    var left   el offsetLeft    var width   el offsetWidth    var height   el offsetHeight     while el offsetParent        el   el offsetParent      top    el offsetTop      left    el offsetLeft         return       top  lt   window pageYOffset   window innerHeight   amp  amp      left  lt   window pageXOffset   window innerWidth   amp  amp       top   height   gt  window pageYOffset  amp  amp       left   width   gt  window pageXOffset

User · Answer

I find that the accepted answer here is overly complicated for most use cases  This code does the job well  using jQuery  and differentiates between fully visible and partially visible elements   var element               element    var topOfElement      element offset   top  var bottomOfElement   element offset   top   element outerHeight true   var  window             window     window bind  scroll   function          var scrollTopPosition      window scrollTop    window height        var windowScrollTop        window scrollTop        if  windowScrollTop  gt  topOfElement  amp  amp  windowScrollTop  lt  bottomOfElement               Element is partially visible  above viewable area          console log  Element is partially visible  above viewable area            else if  windowScrollTop  gt  bottomOfElement  amp  amp  windowScrollTop  gt  topOfElement               Element is hidden  above viewable area          console log  Element is hidden  above viewable area            else if  scrollTopPosition  lt  topOfElement  amp  amp  scrollTopPosition  lt  bottomOfElement               Element is hidden  below viewable area          console log  Element is hidden  below viewable area            else if  scrollTopPosition  lt  bottomOfElement  amp  amp  scrollTopPosition  gt  topOfElement               Element is partially visible  below viewable area          console log  Element is partially visible  below viewable area            else              Element is completely visible         console log  Element is completely visible

User · Answer

I tried Dan s answer  However  the algebra used to determine the bounds means that the element must be both   the viewport size and completely inside the viewport to get true  easily leading to false negatives  If you want to determine whether an element is in the viewport at all  ryanve s answer is close  but the element being tested should overlap the viewport  so try this   function isElementInViewport el        var rect   el getBoundingClientRect         return rect bottom  gt  0  amp  amp          rect right  gt  0  amp  amp          rect left  lt   window innerWidth    document documentElement clientWidth     or   window  width       amp  amp          rect top  lt   window innerHeight    document documentElement clientHeight     or   window  height

User · Answer

The new Intersection Observer API addresses this question very directly   This solution will need a polyfill as Safari  Opera and Internet nbsp Explorer don t support this yet  the polyfill is included in the solution    In this solution  there is a box out of view that is the target  observed   When it comes into view  the button at the top in the header is hidden  It is shown once the box leaves the view    x000D   x000D  const buttonToHide   document querySelector  button    x000D   x000D  const hideWhenBoxInView   new IntersectionObserver  entries    gt    x000D    if  entries 0  intersectionRatio  lt   0       If not in view x000D      buttonToHide style display    inherit   x000D      else   x000D      buttonToHide style display    none   x000D      x000D      x000D   x000D  hideWhenBoxInView observe document getElementById  box     x000D  header   x000D    position  fixed  x000D    top  0  x000D    width  100vw  x000D    height  30px  x000D    background-color  lightgreen  x000D    x000D   x000D   wrapper   x000D    position  relative  x000D    margin-top  600px  x000D    x000D   x000D   box   x000D    position  relative  x000D    left  175px  x000D    width  150px  x000D    height  135px  x000D    background-color  lightblue  x000D    border  2px solid  x000D    x000D   lt script src  https   polyfill io v2 polyfill min js features IntersectionObserver  gt  lt  script gt  x000D   lt header gt  x000D     lt button gt NAVIGATION BUTTON TO HIDE lt  button gt  x000D   lt  header gt  x000D     lt div class  wrapper  gt  x000D       lt div id  box  gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   x000D

User · Answer

I think this is a more functional way to do it  Dan s answer do not work in a recursive context   This function solves the problem when your element is inside others scrollable divs by testing any levels recursively up to the HTML tag  and stops at the first false          fullVisible true only returns true if the all object rect is visible     function isReallyVisible el  fullVisible        if   el tagName     HTML                return true      var parentRect el parentNode getBoundingClientRect        var rect   arguments 2     el getBoundingClientRect        return                 fullVisible   rect top     gt   parentRect top      rect bottom  gt  parentRect top    amp  amp                fullVisible   rect left    gt   parentRect left     rect right   gt  parentRect left    amp  amp                fullVisible   rect bottom  lt   parentRect bottom   rect top     lt  parentRect bottom    amp  amp                fullVisible   rect right   lt   parentRect right    rect left    lt  parentRect right    amp  amp              isReallyVisible el parentNode  fullVisible  rect

User · Answer

A better solution   function getViewportSize w        var w   w    window      if w innerWidth    null          return  w w innerWidth  h w innerHeight       var d   w document      if  document compatMode     CSS1Compat             return               w  d documentElement clientWidth              h  d documentElement clientHeight                      return   w  d body clientWidth  h  d body clientWidth        function isViewportVisible e        var box   e getBoundingClientRect        var height   box height     box bottom - box top       var width   box width     box right - box left       var viewport   getViewportSize        if  height     width          return false      if box top  gt  viewport h    box bottom  lt  0          return false      if box right  lt  0    box left  gt  viewport w          return false      return true

User · Answer

All the answers here are determining if the element is fully contained within the viewport  not just visible in some way  For example  if only half of an image is visible at the bottom of the view  the solutions here will fail  considering that  outside    I had a use case where I m doing lazy loading via IntersectionObserver  but due to animations that occur during pop-in  I didn t want to observe any images that were already intersected on page load  To do that  I used the following code   const bounding   el getBoundingClientRect    const isVisible    0  lt  bounding top  amp  amp  bounding top  lt   window innerHeight    document documentElement clientHeight               0  lt  bounding bottom  amp  amp  bounding bottom  lt   window innerHeight    document documentElement clientHeight      This is basically checking to see if either the top or bottom bound is independently in the viewport  The opposite end may be outside  but as long as one end is in  it s  visible  at least partially

User · Answer

For a similar challenge  I really enjoyed this gist which exposes a polyfill for scrollIntoViewIfNeeded     All the necessary Kung Fu needed to answer is within this block   var parent   this parentNode      parentComputedStyle   window getComputedStyle parent  null       parentBorderTopWidth   parseInt parentComputedStyle getPropertyValue  border-top-width         parentBorderLeftWidth   parseInt parentComputedStyle getPropertyValue  border-left-width         overTop   this offsetTop - parent offsetTop  lt  parent scrollTop      overBottom    this offsetTop - parent offsetTop   this clientHeight - parentBorderTopWidth   gt   parent scrollTop   parent clientHeight       overLeft   this offsetLeft - parent offsetLeft  lt  parent scrollLeft      overRight    this offsetLeft - parent offsetLeft   this clientWidth - parentBorderLeftWidth   gt   parent scrollLeft   parent clientWidth       alignWithTop   overTop  amp  amp   overBottom    this refers to the element that you want to know if it is  for example  overTop or overBottom - you just should get the drift

User · Answer

As simple as it can get  IMO   function isVisible elem      var coords   elem getBoundingClientRect      return Math abs coords top   lt   coords height

User · Answer

Now most browsers support getBoundingClientRect method  which has become the best practice  Using an old answer is very slow  not accurate and has several bugs  The solution selected as correct is almost never precise  You can read more about its bugs   This solution was tested on Internet  Explorer  7  and later   iOS  5  and later  Safari  Android 2 0  Eclair  and later  BlackBerry  Opera Mobile  and Internet  Explorer Mobile 9   function isElementInViewport  el            Special bonus for those using jQuery     if  typeof jQuery      quot function quot   amp  amp  el instanceof jQuery            el   el 0              var rect   el getBoundingClientRect         return           rect top  gt   0  amp  amp          rect left  gt   0  amp  amp          rect bottom  lt    window innerHeight    document documentElement clientHeight   amp  amp     or   window  height              rect right  lt    window innerWidth    document documentElement clientWidth     or   window  width                 How to use  You can be sure that the function given above returns correct answer at the moment of time when it is called  but what about tracking element s visibility as an event  Place the following code at the bottom of your  lt body gt  tag  function onVisibilityChange el  callback        var old visible      return function              var visible   isElementInViewport el           if  visible    old visible                old visible   visible              if  typeof callback     function                     callback                                     var handler   onVisibilityChange el  function            Your code go here             jQuery   window  on  DOMContentLoaded load resize scroll   handler          Non-jQuery if  window addEventListener        addEventListener  DOMContentLoaded   handler  false       addEventListener  load   handler  false       addEventListener  scroll   handler  false       addEventListener  resize   handler  false     else if  window attachEvent         attachEvent  onDOMContentLoaded   handler      Internet Explorer 9         attachEvent  onload   handler       attachEvent  onscroll   handler       attachEvent  onresize   handler          If you do any DOM modifications  they can change your element s visibility of course  Guidelines and common pitfalls  Maybe you need to track page zoom   mobile device pinch  jQuery should handle zoom pinch cross browser  otherwise first or second link should help you  If you modify DOM  it can affect the element s visibility  You should take control over that and call handler   manually  Unfortunately  we don t have any cross browser onrepaint event  On the other hand that allows us to make optimizations and perform re-check only on DOM modifications that can change an element s visibility  Never Ever use it inside jQuery   document  ready   only  because there is no warranty CSS has been applied in this moment  Your code can work locally with your CSS on a hard drive  but once put on a remote server it will fail  After DOMContentLoaded is fired  styles are applied  but the images are not loaded yet  So  we should add window onload event listener  We can t catch zoom pinch event yet  The last resort could be the following code     TODO  this looks like a very bad code    setInterval handler  600    You can use the awesome feature pageVisibiliy of the HTML5 API if you care if the tab with your web page is active and visible  TODO  this method does not handle two situations   overlapping using z-index using overflow-scroll in element s container try something new - The Intersection Observer API explained

[javascript] How can I tell if a DOM element is visible in the current viewport?

Examples related to javascript

Examples related to html

Examples related to firefox

Examples related to dom

Examples related to browser