移动 chrome 上的水平滚动页面奇怪行为答案

【问题标题】：Horizontal scrolling page weird behaviour on mobile chrome移动 chrome 上的水平滚动页面奇怪行为
【发布时间】：2017-12-14 11:02:44
【问题描述】：

我的网站有一个问题，我想做一些不同的事情。基本上我有 4 个 100vh 和 100vw 的部分，你可以用菜单按钮水平滚动它们。现在我在使用移动 Chrome 版本时遇到了一些问题。在 Firefox（桌面和移动）中，一切正常。

这里是有问题的网站（生产代码）：http://dobrywebdev.pl/new

这里是源代码：https://github.com/michalgrochowski/dobrywebdev-v2

我有什么问题：

首先也是最烦人的 - 您可以在 html 和正文区域之外垂直滚动页面 - 为什么？开发工具显示两者具有完全相同的高度，并且在它们下方没有任何内容，但您仍然可以向下滚动。在 Firefox 上 - 就像一个魅力。
第二 - 为什么导航在桌面版本（Chrome 和 firefox）上正好是 100vw 并且固定得很好（例如参见徽标），但在移动设备上，如果它设置为正好 400vw（体宽）宽度：100vw 和最大宽度：100vw？再次 - Firefox 就好了。更有趣的是——Chrome devtools 显示导航实际上是 100vw，但为什么不是？正因为如此，标志和汉堡都不尊重位置：固定并充当绝对，这不是我想要的。
如果html有overflow:hidden和body有overflow-x:hidden并且只有overflow-y:scroll，最后为什么你可以滚动页面？而且，正如您现在可能猜到的那样 - 在 Firefox 上它很好。

老实说，我没有看到任何可能导致这种情况的原因，我非常感谢任何帮助，因为这让我发疯了。我什至不想去想它在 Safari 中的样子......

哦，最有趣的部分 - IE11 和 Edge 也很好！

编辑： NAV 组件 .scss：

.nav__logo {
    position: fixed;
    top: 1.5rem;
    left: 2rem;
    width: 15rem;
}

.nav {
    @include flex-center-row;
    width: 100vw;
    max-width: 100vw;
    height: 6rem;
    position: fixed;
    top: 0;
    left: 0;
    padding: 1rem;
    z-index: 1;
    background-color: #eaeaea;
}

.nav__list {
    @include flex-center-row;
    justify-content: space-around;
    width: 50%;
    padding: 0;
    @include mq-max(850px) {
        display: none;
    }
}

.nav__list--mobile {
    @include flex-center-column;
    background-color: #eaeaea;
    position: fixed;
    left: 0;
    top: 3.5rem;
    width: 100vw;
    display: none;
    padding: 0;
    z-index: 3;
}

.nav__item {
    font-size: 1.8rem;
    display: block;
}

.nav__item--mobile {
    width: 100vw;
    font-size: 1.8rem;
    display: block;
    text-align: center;
    z-index: 4;
    padding: 1rem 0 1rem 0;
}

.nav__link {
    text-decoration: none;
    color: #333;
}

.nav__link--mobile {
    z-index: 5;
}

.nav__link:hover, .nav__link:focus {
    color: #666;
    text-decoration: underline;
}

.nav__hamburger {
    color: #333333;
    font-size: 3rem;
    border: none;
    background: none;
    margin-left: auto;
    @include mq-min(851px) {
        display: none;
    }
}
.nav__close-menu {
    @extend .nav__hamburger;
    display: none;
}

并使用了mixins：

@mixin flex-center-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

@mixin flex-center-column {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

相关正文和部分scss：

* {
    box-sizing: border-box;
}

html {
    font-size: 10px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    overflow: hidden;
    box-sizing: border-box;
}

body {
    box-sizing: border-box;
    font-size: 1.6rem;
    color: #333;
    min-height: 100vh;
    width: 400vw;
    @include flex-center-column;
    background-color: #eaeaea;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
}

// Main layout

.container {
    display: flex;
    width: 400vw;
    height: auto;
    overflow: auto;
}

// Main Section

.main-section {
    width: 100vw;
    max-height: 100vh;
    @include flex-center-column;
    overflow: hidden;
    @include mq-max(850px) {
        max-width: 100vw;
    }
}

.main-section__title {
    font-size: 7rem;
    @include mq-max(850px) {
        font-size: 4rem;
        text-align: center;
    }
}

.main-section__subtitle {
    font-size: 4rem;
    @include mq-max(850px) {
        font-size: 2rem;
    }
}

// Sections styles

.section-wrapper {
    @include flex-center-row;
    width: 100vw;
    min-height: 100vh;
    overflow: auto;
}

.section {
    @include flex-center-column;
    background-color: #eaeaea;
    @include mq-minmax(320px, 968px) {
        width: 95%;
        overflow: auto;
    }
    @include mq-minmax(969px, 1200px) {
        width: 90%;
    }
    @include mq-min(1201px) {
        width: 117rem;
    }
}

.section--about {
    @include mq-max(850px) {
        width: 100vw;
        position: absolute;
        top: 5rem;
        left: 100vw;
    }
}

.section--projects {
    @include mq-max(850px) {
        width: 100vw;
        position: absolute;
        top: 5rem;
        left: 200vw;
    }
}

.section--contact {
    @include mq-max(850px) {
        width: 100vw;
        position: absolute;
        top: 5rem;
        left: 300vw;
    }
}

.section__title {
    font-size: 4rem;
    @include mq-max(850px) {
        width: 95%;
        font-size: 2.5rem;
        text-align: center;
    }
}

.section__subtitle {
    font-size: 2.5rem;
    @include mq-max(850px) {
        width: 95%;
        font-size: 1.8rem;
        text-align: center;;
    }
}

.section__description {
    font-size: 1.8rem;
    width: 100%;
    text-align: center;
    @include mq-max(850px) {
        width: 90%;
        font-size: 1.4rem;
    }
}

最后是标记：

<body id="body" class="body"> 
        <nav class="nav">
            <a class="nav__link" href="#start" title="">
                <img class="nav__logo" src="img/logo.png" alt="">
            </a>
            <ul class="nav__list">
                <li class="nav__item"><a class="nav__link nav__link--about" href="#start" title="">...</a></li>
                <li class="nav__item"><a class="nav__link nav__link--about" href="#about" title="">...</a></li>
                <li class="nav__item"><a class="nav__link nav__link--projects" href="#projects" title="">...y</a></li>
                <li class="nav__item"><a class="nav__link nav__link--contact" href="#contact" title="">...</a></li>
            </ul>
            <ul class="nav__list--mobile">
                <li class="nav__item nav__item--mobile"><a class="nav__link nav__link--mobile" href="#start" title="">...</a></li>
                <li class="nav__item nav__item--mobile"><a class="nav__link nav__link--mobile" href="#about" title="">...</a></li>
                <li class="nav__item nav__item--mobile"><a class="nav__link nav__link--mobile" href="#projects" title="">...</a></li>
                <li class="nav__item nav__item--mobile"><a class="nav__link nav__link--mobile" href="#contact" title="">...</a></li>
            </ul>
            <button class="nav__hamburger icon-menu"></button>
            <button class="nav__close-menu icon-cancel"></button>
        </nav> 
    <main class="container">
        <div class="section-wrapper" id="start">
            <section class="main-section fade-in">
                <h1 class="main-section__title">...</h1>
                <h2 class="main-section__subtitle">...</h2>
            </section>
        </div>
        <div class="section-wrapper" id="about">
            <section class="section section--about fade-in">
                <h2 class="section__title">...</h2>
                <h3 class="section__subtitle">...</h3>
                <p class="section__description">...</p>
                <h3 class="section__subtitle">...</h3>
                <div class="skills">
                    Icons
                </div>
            </section>
        </div>
        <div class="section-wrapper" id="projects">
            <section class="section section--projects fade-in">
                <h2 class="section__title">Projekty</h2>
                <div class="projects owl-carousel owl-theme">
                    <div class="projects__project">
                        Project
                    </div>
                    <div class="projects__project">
                        Project
                    </div>
                    <div class="projects__project">
                        Project
                    </div>
                    <div class="projects__project">
                        Project
                    </div>
                    <div class="projects__project">
                        Project
                    </div>
                    <div class="projects__project">
                        Project
                    </div>
                    <div class="projects__project">
                        Project
                    </div>
                    <div class="projects__project">
                        Project
                    </div>
                </div>
            </section>
        </div>
        <div class="section-wrapper" id="contact">
            <section class="section section--contact fade-in">
                <h2 class="section__title">Kontakt</h2>
                <div class="contact">
                    <form class="form" action="formularz.php" method="POST">
                        Form
                    </form>
                    <div class="socials">
                        Some more icons
                    </div>
                </div>
            </section>
        </div>
    </main>
    <footer id="footer" class="footer">
            <p class="footer__copyright"></p>
    </footer>
</body>

【问题讨论】：

请将源代码放入问题中。不是外部链接。您的问题可能是您设置了100vw、100vh 的任何块元素的继承边距/填充值，以及未正确设置正确的box-sizing 参数。
代码相当多，这就是为什么有一个指向 GitHub 和一个 Live 站点的链接，所以您可以自己查看问题。至于您的解决方案 - 据我所知，没有继承的填充或边距，并且 box-sizing 设置正确。
我认为最烦人的问题是因为您的部分是弹性项目，默认情况下align-items 是stretch，所以您的部分采用最高的弹性项目
@grhu，这就是为什么您应该只在问题中发布相关 CSS 代码！
这里我添加了相关代码。正如你所看到的，它有很多，因为我在页面的不同部分有一些问题。 @Huangism - 所有部分都是弹性项目，但 align-items 不是拉伸的。

标签： html css flexbox

【解决方案1】：

所以，在搜索了几天之后，在几个 Facebook 前端组、reddit 和这里我找不到任何解决方案 - 我决定只使用 OwlCarousel2 并将每个部分都设为 Owl 项目。它就像一个魅力。

我不想这样做，但似乎有一个奇怪的错误，没有人知道如何修复它。

【讨论】：