Question

我想知道如何显示比任何设备的视口更大的包装器的中间部分（例如，这是一部手机），但也可以在x和y上滚动。

我试过了：

<div class="wrapper">
    <div class="quarter first">
        <div class="theme">1</div>
    </div>
    <div class="quarter second">
        <div class="theme">2</div>
    </div>
    <div class="quarter third">
        <div class="theme">3</div>
    </div>
    <div class="quarter fourth">
        <div class="theme">4</div>
    </div>
</div>

使用CSS：

.wrapper {width: 200vw;
    height: 100vh;
    position: relative;
    overflow: scroll;
}

.quarter {width: calc(100% / 2);
    height: calc(100% / 2);
    float: left;
    position: absolute;
    overflow: scroll;
}

.first {background-color: aqua;
    top: 0;
    left: -25%;
}

.second {background-color: yellow;
    top: 0;
    right: 25%;
}

.third {background-color: greenyellow;
    bottom: 0;
    left: -25%;
}

.fourth {background-color: rosybrown;
    bottom: 0;
    right: 0;
}

我知道这些值是无意义的，但我只是想看看左上角部分是否可滚动。事实并非如此。

然后我尝试了一个背景位置的技巧，但每个季度的内容将无法正确显示。

.wrapper {width: 200vw;
    height: 100vh;
    position: fixed;
    overflow: scroll;
}

.quarter {width: calc(100% / 2);
    height: calc(100% / 2);
    float: left;
    position: absolute;
    overflow: scroll;
}

.first {background-color: aqua;
    top: 0;
    left: 0;
    background: -50%;
}

.second {background-color: yellow;
    top: 0;
    right: 0;
}

.third {background-color: greenyellow;
    bottom: 0;
    left: 0;
}

.fourth {background-color: rosybrown;
    bottom: 0;
    right: 0;
}

感谢您的回答＆lt; 3

如何将视图集中在包装器的中间？

0 个答案: