How to check if an element is off-screen

by

Depends on what your definition of “offscreen” is. Is that within the viewport, or within the defined boundaries of your page?

Using Element.getBoundingClientRect() you can easily detect whether or not your element is within the boundries of your viewport (i.e. onscreen or offscreen): 

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

You could then use that in several ways:

// returns all elements that are offscreen
$(':offscreen');

// boolean returned if element is offscreen
$('div').is(':offscreen');

More Related Contents:

  1. jQuery append function is just appending the html but not the classes related to it
  2. ReferenceError: event is not defined
  3. Which is the fastest way to loop? [for curiosity]
  4. Jquery replace only specific characters [closed]
  5. Regex for Email Address along with name format [duplicate]
  6. SecurityError: Blocked a frame with origin from accessing a cross-origin frame
  7. window.onload vs $(document).ready()
  8. What’s the best way to detect a ‘touch screen’ device using JavaScript?
  9. How to resize images proportionally / keeping the aspect ratio?
  10. Is there a null-coalescing (Elvis) operator or safe navigation operator in javascript?
  11. Remove ALL white spaces from text
  12. Format a number as 2.5K if a thousand or more, otherwise 900
  13. Image convert to Base64
  14. What does $.when.apply($, someArray) do?
  15. Check if option is selected with jQuery, if not select a default
  16. Export to csv in jQuery
  17. How can I listen for a click-and-hold in jQuery?
  18. How to get the number of lines in a textarea?
  19. make html text input field grow as I type?
  20. Convert numbers to letters beyond the 26 character alphabet
  21. Why is ‘event’ available globally in Chrome but not Firefox?
  22. Possible to associate label with checkbox without using “for=id”?
  23. Waiting on multiple asynchronous calls to complete before continuing
  24. Moving a focus when the input text field reaches a max length
  25. How to scroll to an element in jQuery?
  26. Web browser: Hide mouse cursor [duplicate]
  27. JQuery issue “TypeError: $.getJSON is not a function”
  28. Best JavaScript Date Parser & Formatter? [closed]
  29. how to use jQuery installed with npm in Express app?
  30. Set Caret Position in ‘contenteditable’ div that has children

Leave a Comment