Question

我正在尝试使用onclick事件将position：absolute容器转换为position：fixed容器，并且动画中没有任何怪异的跳跃，所以我尝试使用getBoundingClientRect()进行转换我的容器的绝对坐标为固定坐标，以准备绝对->固定位置更改，以使其不会“跳转”。但是，当位置更改为固定位置时，每次单击对象时，位置都会有一个小的跳跃。

我已经尝试过合并margin等。等等div位于width 105vw的容器中，并且顶部/左侧的margin为-5%，因此我尝试将getBoundingClientRect().left添加到(parentContainer).clientWidth * (0.05/1.05)，并且我也尝试过相同的操作，但是使用0.05而不是(0.05 / 1.05)。 (0.05/1.05)使我最接近我，但还是有点差。我还将padding和border都设置为0，但没有骰子。


    var circles = document.querySelectorAll('.circle');

    Object.entries(circles).map((object) => 
        {
            object[1].addEventListener('click', expandCircle);
        }
    );

    function expand(circle){
        circle.style.transition = 'top 1s, left 1s, height 1s, width 1s, border-radius 1s, margin 1s';
        circle.style.zIndex = '100';
        circle.style.top = '0%';
        circle.style.height = '100vh';
        circle.style.width = '100vw';
        circle.style.left = '0%';
        circle.style.borderRadius = '0%';
        circle.style.margin = '0 0 0 0';
        xButton.style.transition = 'opacity 3s';
        xButton.style.opacity = '1';
    }

    function expandCircle() {
        var bodyPosition = document.body.getBoundingClientRect();
        var newPosition = this.getBoundingClientRect();
        this.style.top = String(newPosition.top + document.getElementById('category_top').clientWidth * (0.05/1.05)) + 'px';
        this.style.left = String(newPosition.left + document.getElementById('category_top').clientWidth * (0.05/1.05)) + 'px';
        this.style.position = 'fixed';
        this.style.height = String(newPosition.height) + 'px';
        this.style.width = String(newPosition.width) + 'px';
        //setTimeout(expand, 10, this);
    };


    body, html {margin:0;padding:0;height:100%;}


    #title {
        text-align: center;
        height: 400px;
        line-height: 400px;
    }

    .category {
        height: 20vw;
        /* Used to Vertical Align .circles within .category*/
        position: relative;
    }

    .category .circle {
        background-color: #bbb;
        border-radius: 50%;
        background-image: url('lake_snowy.jpg');
        background-size: cover;
        line-height: 400px;
        /* Used to Vertical Align .circles within .category*/
        position: absolute;
        top: 50%;
        height: 50%;
        width: 10%;
        margin: -5% 0 0 -5%;
        padding: 0px;
        border: 0px;
        transition: transform 1s;
    }

    .rightside {
        left: 40%;
    }

    .leftside {
        left: 20%;
    }

    #test {
        height: 1000px;
        background-color: #000000;
        color: #ffffff;
        z-index: 5;
        position: relative;
        margin-top: -25px;
        width: 105vw;
        left: 0%;
        margin-left: -5%;
    }

    #intro {
        height: 400px;
        width: 105vw;
        left: 0%;
        position: relative;
        background-image: url('generic_lake.jpg');
        background-size: cover;
        background-position: bottom left;
        margin-bottom: 0px;
        z-index: 5;
        margin-left: -5%;
    }


    <!DOCTYPE html>
    <html>
      <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="home.css" type="text/css">
      </head>
      <body>

        <div id = 'home_header'>
            <div id = 'title'>
                <h1>Title Goes Here</h1>
            </div>

        </div>
        <div id = 'transparent'>

        </div>
        <div id = 'cancel'>

        </div>
        <div id = 'intro'>
            <h1>Introduction</h1>
        </div>
        <div id = 'test'>
            <h1>Links Here</h1>
            <div class = 'category' id = 'category_top'>
                <div class = 'circle leftside' id = 'div1'>
                </div>
                <div class = 'circle rightside' id = 'div2'>
                </div>
            </div>
            <div class = 'category' id = 'category_bottom'>
                <div class = 'circle leftside' id = 'div3'>
                </div>
                <div class = 'circle rightside' id = 'div4'>
                </div>
            </div>
        </div>
        <script src = './script.js'></script>
      </body>
    </html>

从理论上讲，onclick事件在滚动页面之前似乎没有任何作用。在单击之前滚动页面时，div circle应该充当position:absolute，而在单击之后，div应该充当position:fixed。

getBoundingClientRect（）没有返回正确的值

0 个答案: