十字型单页网站水平滚动后垂直滚动空白问题求解

问题现象 #

十字布局单页网站，垂直滚动通过scroll-snap-type实现正常，但水平滚动到第二屏后，向下垂直滚动会被阻断，无法跳转至subscription-container区域，甚至出现空白页面。每个垂直区块高度为100vh，水平滚动区域包含两个100vw宽度的页面。

问题根源 #

1. content-container设置为400vw宽，依赖外层容器溢出实现水平滚动，水平偏移后干扰了外层垂直滚动的捕捉逻辑
2. 水平滚动区域未单独设置滚动捕捉规则，浏览器无法正确区分水平/垂直滚动的触发目标
3. 垂直滚动捕捉的对齐逻辑被宽容器的水平偏移打乱，无法定位到下一个垂直区块

修复方案 #

1. 调整水平滚动容器样式 #

让content-container独立处理内部水平滚动，添加水平滚动捕捉规则：

.content-container{
    height: 100vh;
    width: 100vw; /* 适配视口宽度，替代原400vw */
    background-color: black;
    scroll-snap-align: start;
    flex-direction: row;
    display: flex;
    overflow-x: auto; /* 开启水平滚动 */
    scroll-snap-type: x mandatory; /* 水平滚动捕捉规则 */
    scrollbar-width: none; /* 隐藏滚动条（可选优化） */
}
/* 隐藏webkit内核浏览器的滚动条 */
.content-container::-webkit-scrollbar{
    display: none;
}

2. 为水平区块添加滚动捕捉 #

确保每个水平页面滚动时能正确对齐：

.content-container .first,
.content-container .story{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8em;
    scroll-snap-align: start; /* 水平滚动捕捉对齐 */
}

3. 优化锚点跳转逻辑 #

替换原锚点链接为JS触发的平滑滚动，避免与垂直滚动锚点冲突：

<!-- 原First区块的跳转链接 -->
<a onclick="document.getElementById('story').scrollIntoView({behavior:'smooth', inline:'start'})">Story</a>

<!-- 原Story区块的跳转链接 -->
<a onclick="document.getElementById('first').scrollIntoView({behavior:'smooth', inline:'start'})">First</a>

修改后的完整代码 #

CSS代码 #

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    color: white;
}

h1{
    font-weight: normal;
}

@font-face {
    font-family: 'besom_extendedregular';
    src: url('../src/webfonts/besom-extended-webfont.woff2') format('woff2'),
         url('../src/webfonts/besom-extended-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.main-container{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100vh;
    scroll-behavior: smooth;
}

.navi{
    position: fixed;
}

.hero{
    height: 100vh;
    background-color: beige;
    background-position: center;
    background-size: cover;
    scroll-snap-align: start;
}

.logo-section{
    justify-content: center;
    display: flex;
    padding: 150px;
}

.logo-section img{
    max-width: 70%;
    max-height: 270px;
}

.content-container{
    height: 100vh;
    width: 100vw;
    background-color: black;
    scroll-snap-align: start;
    flex-direction: row;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.content-container::-webkit-scrollbar{
    display: none;
}
.content-container .first{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8em;
    background-color: brown;
    scroll-snap-align: start;
}
.content-container .story{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8em;
    background-color: red;
    scroll-snap-align: start;
}

.subscription-container{
    height: 100vh;
    background-color: black;
    scroll-snap-align: start;
    padding-top: 80px;
    padding-left: 150px;
    padding-right: 150px;
}

.bottom-container{
    height: 100vh;
    background-color: black;
    scroll-snap-align: start;
    padding-top: 80px;
}

.footer-nav-main{
    float: left;
    display: flex;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    margin-left: 35px;
    margin-right: 35px;
}

.footer-main{
    margin-top: 80vh;
}

HTML代码 #

<div class="main-container">
    <section class="hero">
        <div class="logo-section">
            <img class="logo" src="" alt="Logo">
        </div>
        <div class="announcement-head">
            <p>Title</p>
        </div>
        <div class="announcement-text">
            <p>Subtitle</p>
        </div>
    </section>

    <div id="content-container" class="content-container">
        <section id="first" class="first">
            <div>
                <h1>First</h1>
                <a onclick="document.getElementById('story').scrollIntoView({behavior:'smooth', inline:'start'})">Story</a>
            </div>
        </section>
        <section id="story" class="story">
            <div>
                <h1>Story 1</h1>
                <a onclick="document.getElementById('first').scrollIntoView({behavior:'smooth', inline:'start'})">First</a>
            </div>
        </section>
    </div>

    <section class="subscription-container">
        <div class="main-head">
            <h1>Dream with us !</h1>
        </div>
        <div class="main-text">
            <p>text section</p>
        </div>
    </section>
    <section class="bottom-container">
        <div><h1>Bottom Container</h1></div>
        <div class="footer-main">
            <ul class="footer-nav-main">
                <li><a href="">Foot1</a></li>
                <p>/</p>
                <li><a href="">Foot2</a></li>
                <p>/</p>
                <li><a href="">Foot3</a></li>  
            </ul>
            <p class="bottom-text-copyright">© </p>
        </div>
    </section>
</div>

内容的提问来源于stack exchange，提问作者Pascal Konezciny