{"id":1578,"date":"2018-10-26T13:00:07","date_gmt":"2018-10-26T12:00:07","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1578"},"modified":"2022-07-25T08:35:44","modified_gmt":"2022-07-25T07:35:44","slug":"javascript-get-elements-position-relative-to-view-center","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/javascript-get-elements-position-relative-to-view-center\/","title":{"rendered":"Javascript get elements position relative to view center"},"content":{"rendered":"<pre class=\"lang:xhtml decode:true \">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\" dir=\"ltr\"&gt;\r\n    &lt;head&gt;\r\n        &lt;meta charset=\"utf-8\"&gt;\r\n        &lt;title&gt;&lt;\/title&gt;\r\n        &lt;style&gt;\r\n        * {margin:0;padding:0;}\r\n        .hline {width:99vw;height:1px;position:absolute;left:0;top:0;}\r\n        .vline {height:99vh;width:1px;position:absolute;left:0;top:0;}\r\n        &lt;\/style&gt;\r\n    &lt;\/head&gt;\r\n    &lt;body style=\"height:300vh;width:300vw\"&gt;\r\n        &lt;div style=\"background-color:green;margin:30px;\"&gt;\r\n            B\r\n            &lt;div id=\"a\" style=\"background-color:yellow;margin:20px;margin-left:500px;margin-top:1000px;\"&gt;\r\n                A\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n\r\n        &lt;div id=\"v1\" class=\"hline\" style=\"background-color:red\"&gt;&lt;\/div&gt;\r\n        &lt;div id=\"c1\" class=\"hline\" style=\"background-color:blue\"&gt;&lt;\/div&gt;\r\n\r\n        &lt;div id=\"v2\" class=\"vline\" style=\"background-color:red\"&gt;&lt;\/div&gt;\r\n        &lt;div id=\"c2\" class=\"vline\" style=\"background-color:blue\"&gt;&lt;\/div&gt;\r\n\r\n        &lt;script type=\"text\/javascript\"&gt;\r\n            const $ = document.querySelectorAll.bind(document);\r\n            const on = window.addEventListener.bind(window);\r\n            const off = window.removeEventListener.bind(window);\r\n            let v1, c1;\r\n            let v2, c2;\r\n\r\n            on(\"DOMContentLoaded\", () =&gt; {\r\n\r\n                const el = $('#a')[0];\r\n\r\n                v1 = $('#v1')[0];\r\n                c1 = $('#c1')[0];\r\n                v2 = $('#v2')[0];\r\n                c2 = $('#c2')[0];\r\n\r\n                on('scroll', () =&gt; {\r\n                    const r = updateElViewPosition(document.documentElement, el);\r\n                    console.log(r);\r\n                });\r\n                updateElViewPosition(document.documentElement, el);\r\n            });\r\n\r\n            function getElementVerticalViewPosition(parent, el)\r\n            {\r\n                const parentSize = parent.getBoundingClientRect();\r\n                const elSize = el.getBoundingClientRect();\r\n                const viewSizeHalf = parent.clientHeight \/ 2;\r\n                const offsetTop = elSize.top - parentSize.top;\r\n                const scrollCenter = (parent.scrollTop + viewSizeHalf);\r\n                const elementCenter = (offsetTop + (elSize.height \/ 2));\r\n                const viewPosition = 1 - (Math.min(viewSizeHalf, Math.abs(scrollCenter - elementCenter)) \/ viewSizeHalf);\r\n\r\n                return {\r\n                    scrollCenter,\r\n                    elementCenter,\r\n                    viewPosition\r\n                };\r\n            }\r\n\r\n            function getElementHorizontalViewPosition(parent, el)\r\n            {\r\n                const parentSize = parent.getBoundingClientRect();\r\n                const elSize = el.getBoundingClientRect();\r\n                const viewSizeHalf = parent.clientWidth \/ 2;\r\n                const offsetLeft = elSize.left - parentSize.left;\r\n                const scrollCenter = (parent.scrollLeft + viewSizeHalf);\r\n                const elementCenter = (offsetLeft + (elSize.width \/ 2));\r\n                const viewPosition = 1 - (Math.min(viewSizeHalf, Math.abs(scrollCenter - elementCenter)) \/ viewSizeHalf);\r\n\r\n                return {\r\n                    scrollCenter,\r\n                    elementCenter,\r\n                    viewPosition\r\n                };\r\n            }\r\n\r\n            function updateElViewPosition(parent, el) {\r\n                const p1 = getElementVerticalViewPosition(parent, el);\r\n                const p2 = getElementHorizontalViewPosition(parent, el);\r\n                v1.style.top = p1.scrollCenter +'px';\r\n                c1.style.top = p1.elementCenter +'px';\r\n\r\n                v2.style.left = p2.scrollCenter +'px';\r\n                c2.style.left = p2.elementCenter +'px';\r\n\r\n                console.log('v', p1.viewPosition);\r\n                console.log('h', p2.viewPosition);\r\n            }\r\n\r\n        &lt;\/script&gt;\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;!DOCTYPE html&gt; &lt;html lang=&#8221;en&#8221; dir=&#8221;ltr&#8221;&gt; &lt;head&gt; &lt;meta charset=&#8221;utf-8&#8243;&gt; &lt;title&gt;&lt;\/title&gt; &lt;style&gt; * {margin:0;padding:0;} .hline {width:99vw;height:1px;position:absolute;left:0;top:0;} .vline {height:99vh;width:1px;position:absolute;left:0;top:0;} &lt;\/style&gt; &lt;\/head&gt; &lt;body style=&#8221;height:300vh;width:300vw&#8221;&gt; &lt;div style=&#8221;background-color:green;margin:30px;&#8221;&gt; B &lt;div id=&#8221;a&#8221; style=&#8221;background-color:yellow;margin:20px;margin-left:500px;margin-top:1000px;&#8221;&gt; A &lt;\/div&gt; &lt;\/div&gt; &lt;div id=&#8221;v1&#8243; class=&#8221;hline&#8221; style=&#8221;background-color:red&#8221;&gt;&lt;\/div&gt; &lt;div id=&#8221;c1&#8243; class=&#8221;hline&#8221; style=&#8221;background-color:blue&#8221;&gt;&lt;\/div&gt; &lt;div id=&#8221;v2&#8243; class=&#8221;vline&#8221; style=&#8221;background-color:red&#8221;&gt;&lt;\/div&gt; &lt;div id=&#8221;c2&#8243; class=&#8221;vline&#8221; style=&#8221;background-color:blue&#8221;&gt;&lt;\/div&gt; &lt;script type=&#8221;text\/javascript&#8221;&gt; const $ = document.querySelectorAll.bind(document); const on = window.addEventListener.bind(window); [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-1578","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1578"}],"version-history":[{"count":4,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1578\/revisions"}],"predecessor-version":[{"id":1589,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1578\/revisions\/1589"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}