{"id":107,"date":"2024-08-19T06:22:51","date_gmt":"2024-08-19T06:22:51","guid":{"rendered":"https:\/\/www.yehger.com\/?p=107"},"modified":"2024-08-19T06:50:23","modified_gmt":"2024-08-19T06:50:23","slug":"how-to-detect-if-a-div-is-scrolled-to-bottom","status":"publish","type":"post","link":"https:\/\/www.yehger.com\/index.php\/2024\/08\/19\/how-to-detect-if-a-div-is-scrolled-to-bottom\/","title":{"rendered":"How to detect if a div is scrolled to bottom?"},"content":{"rendered":"<h2>Code<\/h2>\n<pre><code class=\"language-js\">document.querySelector(&#039;.list&#039;).addEventListener(&#039;scroll&#039;,function(e){\n    \/\/ console.log(e.target.scrollTop)\n    \/\/ console.log(e.target.clientHeight)\n    \/\/ console.log(e.target.scrollHeight)\n    \/\/ console.log(Math.abs(e.target.scrollHeight - (e.target.scrollTop + e.target.clientHeight)))\n       if(Math.abs(e.target.scrollHeight - (e.target.scrollTop + e.target.clientHeight)) &lt; .5){\n            console.log(&#039;reached bottom&#039;)\n       }\n})\n};<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Code document.querySelector(&#039;.list&#039;).addEventListener(&#039;scroll&#039;,function(e){ \/\/ console.log(e.target.scrollTop) \/\/ console.log(e.target.clientHeight) \/\/ console.log(e.target.scrollHeight) \/\/ console.log(Math.abs(e.target.scrollHeight &#8211; (e.target.scrollTop + e.target.clientHeight))) if(Math.abs(e.target.scrollHeight &#8211; (e.target.scrollTop + e.target.clientHeight)) &lt;&#8230; <a class=\"read-more\" href=\"https:\/\/www.yehger.com\/index.php\/2024\/08\/19\/how-to-detect-if-a-div-is-scrolled-to-bottom\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-107","post","type-post","status-publish","format-standard","hentry","category-html-css-js"],"_links":{"self":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":1,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"predecessor-version":[{"id":108,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/107\/revisions\/108"}],"wp:attachment":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}