水平スクロールページモバイルクロムの奇妙な振る舞い

Question

私は少し違ったやり方で自分のウェブサイトに問題があります。基本的には100vhと100vwの4つのセクションがあり、メニューボタンを使ってそれらを水平にスクロールします。今、私はモバイルChromeのバージョンにいくつか問題があります。 Firefox（デスクトップとモバイル）では、すべてが正常に動作します。ここで

質問（製品コード）でのサイトです：http://dobrywebdev.pl/new

そしてここでは、ソースコードは次のとおりです。https://github.com/michalgrochowski/dobrywebdev-v2

私の問題は何ですか：

• まず、最も厄介な - あなたはHTMLと本文領域の外側でページを垂直方向にスクロールできます - なぜですか？開発ツールは、両方とも正確に同じ高さを持っていることを示していますが、その下には何もありませんが、それでも下にスクロールできます。 firefox上で - 魅力のように動作します。

• 第2の理由 - navがデスクトップ版（Chromeとfirefox）で正確に100vwで、うまく固定されています（ロゴなどを参照）。しかし、モバイルでは幅が400vw（本体幅） ：100vw、最大幅：100vw？再び - Firefoxはうまくいく。もっと面白いのは - Chrome devtoolsは、navが実際には100vwであることを示していますが、なぜそうではないのですか？そのため、ロゴとハンバーガーの両方は、その位置を尊重するものではありません。固定され、絶対的なものとして行動します。これは私が望むものではありません。

• 最後に、htmlにオーバーフローがあると、ページをスクロールできます：hiddenとbodyにoverflow-x：hiddenがあり、overflow-y：scrollだけがありますか？そして、あなたが今のところ推測しているように、Firefoxではうまくいきます。

正直なところ、私はそれを引き起こす可能性があり、それは私にナットを駆動しているので、私は非常に多く、任意の助けをいただければ幸いですanthingが表示されません。私はSafariで見た目を考えることさえしたくない...

ああ、おかしな部分 - IE11とEdgeもちょうど良いです！

EDIT： 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; 
} 

とミックスインを使用する：

@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> 

Answer 1

Facebookのフロントエンドグループをいくつか探して、redditしても何の解決策も見つけられなかったので、私はOwlCarousel2を使い、各セクションにOwlアイテムを作ることにしました。それは魅力のように働く。

私はそれを望んでいませんでしたが、奇妙なバグがあり、誰にもそれを修正する方法がわかっていないようです。