移动Chrome上的水平滚动页面奇怪的行为

时间：2017-07-10 15:58:11

标签： html css css3 flexbox

我的网站存在问题，我想稍微改变一下。基本上我有4个100vh和100vw的部分，你可以用菜单按钮水平滚动它们。现在我在移动Chrome版本上遇到了一些麻烦。在Firefox（桌面和移动设备）中，一切都按预期工作。

以下是相关网站（生产代码）：http://dobrywebdev.pl/new

以下是源代码：https://github.com/michalgrochowski/dobrywebdev-v2

我有什么问题：

  • 首先也是最烦人的 - 你可以在html和body区域外垂直滚动页面 - 为什么？开发工具显示两者都具有完全相同的高度，而在它们之下没有任何东西，但您仍然可以向下滚动它。在Firefox上 - 像魅力一样。

  • 第二 - 为什么导航在桌面版（Chrome和firefox）上只有100vw并且修复得很好（例如参见徽标），但在移动设备上，如果设置为400，则转为400vw（正文宽度）宽度：100vw和最大宽度：100vw？再次 - Firefox就好了。什么更有趣 - Chrome devtools显示导航实际上是100vw，但为什么不是？因为徽标和汉堡都不尊重这个位置：固定并且充当绝对，这不是我想要的。

  • 最后为什么你可以滚动页面，如果html有溢出：隐藏和身体有溢出-x：隐藏，只有溢出-y：滚动？而且，正如你现在已经猜到的那样 - 在Firefox上它很好。

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

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

编辑： 资产净值组件.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>

1 个答案:

答案 0 :(得分：0)

所以，搜索了几天后，询问了几个Facebook前端组，reddit，在这里我找不到任何解决方案 - 我决定只使用OwlCarousel2并使每个部分成为猫头鹰项目。它就像一个魅力。

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

相关问题
最新问题