Javascript get elements position relative to view center

Date: 2018-10-26 
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        * {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;}
        </style>
    </head>
    <body style="height:300vh;width:300vw">
        <div style="background-color:green;margin:30px;">
            B
            <div id="a" style="background-color:yellow;margin:20px;margin-left:500px;margin-top:1000px;">
                A
            </div>
        </div>

        <div id="v1" class="hline" style="background-color:red"></div>
        <div id="c1" class="hline" style="background-color:blue"></div>

        <div id="v2" class="vline" style="background-color:red"></div>
        <div id="c2" class="vline" style="background-color:blue"></div>

        <script type="text/javascript">
            const $ = document.querySelectorAll.bind(document);
            const on = window.addEventListener.bind(window);
            const off = window.removeEventListener.bind(window);
            let v1, c1;
            let v2, c2;

            on("DOMContentLoaded", () => {

                const el = $('#a')[0];

                v1 = $('#v1')[0];
                c1 = $('#c1')[0];
                v2 = $('#v2')[0];
                c2 = $('#c2')[0];

                on('scroll', () => {
                    const r = updateElViewPosition(document.documentElement, el);
                    console.log(r);
                });
                updateElViewPosition(document.documentElement, el);
            });

            function getElementVerticalViewPosition(parent, el)
            {
                const parentSize = parent.getBoundingClientRect();
                const elSize = el.getBoundingClientRect();
                const viewSizeHalf = parent.clientHeight / 2;
                const offsetTop = elSize.top - parentSize.top;
                const scrollCenter = (parent.scrollTop + viewSizeHalf);
                const elementCenter = (offsetTop + (elSize.height / 2));
                const viewPosition = 1 - (Math.min(viewSizeHalf, Math.abs(scrollCenter - elementCenter)) / viewSizeHalf);

                return {
                    scrollCenter,
                    elementCenter,
                    viewPosition
                };
            }

            function getElementHorizontalViewPosition(parent, el)
            {
                const parentSize = parent.getBoundingClientRect();
                const elSize = el.getBoundingClientRect();
                const viewSizeHalf = parent.clientWidth / 2;
                const offsetLeft = elSize.left - parentSize.left;
                const scrollCenter = (parent.scrollLeft + viewSizeHalf);
                const elementCenter = (offsetLeft + (elSize.width / 2));
                const viewPosition = 1 - (Math.min(viewSizeHalf, Math.abs(scrollCenter - elementCenter)) / viewSizeHalf);

                return {
                    scrollCenter,
                    elementCenter,
                    viewPosition
                };
            }

            function updateElViewPosition(parent, el) {
                const p1 = getElementVerticalViewPosition(parent, el);
                const p2 = getElementHorizontalViewPosition(parent, el);
                v1.style.top = p1.scrollCenter +'px';
                c1.style.top = p1.elementCenter +'px';

                v2.style.left = p2.scrollCenter +'px';
                c2.style.left = p2.elementCenter +'px';

                console.log('v', p1.viewPosition);
                console.log('h', p2.viewPosition);
            }

        </script>
    </body>
</html>

 

15780cookie-checkJavascript get elements position relative to view center