{"id":1784,"date":"2017-05-03T10:14:02","date_gmt":"2017-05-03T08:14:02","guid":{"rendered":"https:\/\/blog.kodono.info\/wordpress\/?p=1784"},"modified":"2017-05-03T10:14:02","modified_gmt":"2017-05-03T08:14:02","slug":"check-if-an-element-is-visible-javascript","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2017\/05\/03\/check-if-an-element-is-visible-javascript\/","title":{"rendered":"Check if an element is visible [JavaScript]"},"content":{"rendered":"<p>We can find plenty of answers about how to check if an element is visible.<\/p>\n<p>In my case the one which works with <code>opacity<\/code>, and into a scrollable area, is <a href=\"http:\/\/stackoverflow.com\/a\/41754707\/1134119\">this one<\/a> (that I have optimized):<\/p>\n<pre class=\"brush:javascript\">\r\nfunction isScrolledIntoView(el, holder) {\r\n  var bndElem = el.getBoundingClientRect();\r\n  var bndHolder = holder.getBoundingClientRect();\r\n  return bndElem.top &lt;= bndHolder.top ? !(bndHolder.top - bndElem.top > bndElem.height) : !(bndElem.bottom - bndHolder.bottom > bndElem.height);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>We can find plenty of answers about how to check if an element is visible. In my case the one which works with opacity, and into a scrollable area, is this one (that I have optimized): function isScrolledIntoView(el, holder) { var bndElem = el.getBoundingClientRect(); var bndHolder = holder.getBoundingClientRect(); return bndElem.top &lt;= bndHolder.top ? !(bndHolder.top &#8211; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[170,11,33],"tags":[123,24,151,158],"class_list":["post-1784","post","type-post","status-publish","format-standard","hentry","category-english","category-niveau-debutant","category-programmation","tag-english","tag-javascript","tag-niveau-debutant","tag-programmation"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=1784"}],"version-history":[{"count":1,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1784\/revisions"}],"predecessor-version":[{"id":1785,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1784\/revisions\/1785"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=1784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=1784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=1784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}