如何修复 "nowhere" 出现的滚动条的自上卷效果？

Question

最近我试图让我的页面响应智能手机，此页面在计算机上正确显示：

但是当涉及到智能手机时，我最终得到了某种“自动向上滚动效果”，只是不让用户看到页面底部的内容：

下面我将分享此页面各自的 html 和 CSS 代码，我认为解决方案应该在 @media (min-width: 270px) and (min-height: 580px) and (max-width: 414px) and (max-height: 812px) 部分应用，但到目前为止我已经尝试了所有方法理解为什么会出现这个错误，但我所有的努力都是徒劳的，所以如果有人能帮助我，我将不胜感激，这是我让我的网站正常运行所需要的最后一件事:)

html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Goals</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
    <link href="goalsstyle.css" rel="stylesheet">
</head>
<body>
    <div class="s">
        <a href="index.html">Return to Index<i class="fas fa-hand-point-left"></i></a>
    </div>
    <script>
        function createSquare(){
            const section = document.querySelector('section');
            const square = document.createElement('span');

            var size = Math.random()*60;

            square.style.width = 30+size+'px';
            square.style.height = 30+size+'px';

            square.style.top = Math.random()*innerHeight+'px';
            square.style.left = Math.random()*innerWidth+'px';

            section.appendChild(square);
      
            setTimeout(() =>{
                   square.remove()
            },1480)
       }
       setInterval(createSquare , 150)
    </script>
    <section>
    <div class="container">
        <div class="card">
            <div class="imgBx">
              <img src="secretlogo.png">
            </div>
            <div class="content">
                <h2>sCOP</h2>
                <p>To develop a <a href="https://build.scrt.network/dev/secret-contracts.html" style="color: #ffffff" target="_blank">Secret Smart Contract</a> which mints a stablecoin pegged to the value of the Colombian Peso to allow local investors allocate portions of their portfolios to it instead of having to cash them out on centralized exchanges such as Binance.</p>
            </div>
        </div>
    <div class="card">
        <div class="imgBx">
            <img src="Chainlink.png" width="600" height="600">
        </div>
        <div class="content">
            <h2 style="font-size:19px;">Provably Secure Gaming Application</h2>
            <p>To build a provably secure gaming application with <a href="https://chain.link/solutions/chainlink-vrf" style="color: #2A79FF" target="_blank">Chainlink VRF</a> that allows users to spend LINK tokens to play an arcade-like game which would reward them with a Dynamic NFT if they win, such Dynamic NFTs could be traded freely on the market.</p>
          </div>
      </div>
    <div class="card">
          <div class="imgBx">
              <img src="Elon Mask NFT.png" width="445" height="600">
          </div>
          <div class="content">
              <h2 style="font-size:19px;">Private Meme Coin</h2>
              <p>To develop a private meme coin based on and launch it into the market just for fun, depending on the success and its community, to add new innovative features (such as lending/borrowing, for instance) to make it more valuable and would be a must.</p>
          </div>
      </div>
    </div>
    </section>
    <h3>Noah Verner</h3>
    <header></header>
    <main>
      <article></article>
      <aside></aside>
    </main>
    <footer>Made by NOAH VERNER</footer>    
    <script type="text/javascript" src="vanilla-tilt.js"></script>
    <script>VanillaTilt.init(document.querySelectorAll(".card"),{max: 19, speed: 400});</script>
</body>
</html>

CSS:

@font-face {
    src: url(Fonts/InputSerifCondensed-Regular.ttf);
    font-family: InputSerif;
}


* {
    font-family: InputSerif;
}

body {
    background-color: #F5DC00;
    overflow: hidden;
    margin: 0;
    padding: 0;
    color: #000000;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    
}

section {
    min-height: 100vh;
    
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
   
   
}

.container .card{
    position: relative;
    width: 430px;
    height: 620px;
    margin: 150px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.85);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
}

.container .card .content {
    position: absolute;
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px;
} 

.container .card .content h2 {
    color: #ffffff;
    display: flex;
    justify-content: center;
    padding: 0px 0px;
}

.container .card .content p {
    color: #ffffff;
    font-size: 18px;
}



.container .card .imgBx {
    position: relative;
    bottom: 120px;
    transform: scale(0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px;
}

.container .card. .imgBx img {
    max-width: 100%;
    margin: 0 0 20px;
}


span {
    position: absolute;
    pointer-events: none;
    background: #000;
    animation: animate 2s infinite running; 
}

@keyframes animate {
    0%  {transform: scale(0) translateY(0) rotate(0deg); opacity: 1;}
    10% {opacity: 1;}
    45% {opacity: 1;}
    85% {opacity: 0;}
    100%{transform: scale(1.5) translateY(-1200%) rotate(445deg); opacity: 0;}
}

h3 {
    position: fixed;
    top: -20px ;
    font-size: 12px;
    width: 100%;
    background-color: black;
    color: white;
    font-size: 20px;
    text-align: center;
}

footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: black;
    color: white;
    font-weight: bold;
    text-align: center;
    
}

/*Barra de iconos de redes sociales*/

.s {
    position: absolute;
    justify-content: center;
    height: 100vh;
    display: flex;
    left: 0;
    flex-direction: column;
    transform: translate(-82.5%);

}

.s a {
    color: #F5DC00;
    background: rgba(0, 0, 0, 1);
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    display: block;
    margin: 5px;
    padding: 20px;
    width: 300px;
    text-align: right;
    border-radius: 50px;
    transition: 1s;
    transition-property: transform;
}
.s a:hover {
    transform: translate(200px, 0);
}
.s i {
    margin-left: 10px;
    font-size: 30px;
    width: 30px;
    height: 30px;
}
.s a:nth-child(1) i {
    color: #F5DC00;
}

@media (min-width: 270px) and (min-height: 580px) and (max-width: 414px) and (max-height: 812px) {

    .s {
        position: absolute;
        justify-content: center;
        height: 100vh;
        display: flex;
        left: 0;
        flex-direction: column;
        transform: translate(-82.5%);
        z-index: 2;
    }
    .s a {
        color: #F5DC00;
        background: rgba(0, 0, 0, 1);
        font-size: 20px;
        font-weight: 600;
        text-decoration: none;
        display: block;
        margin: 2px;
        padding: 8px;
        width: 250px;
        text-align: right;
        border-radius: 50px;
        transition: 1s;
        transition-property: transform;
    }

    .container {
        position: relative;
        left: 8px;
        display: flex;
        max-width: 330px;
        flex-direction: column;
    }

    .container .card {
        position: relative;
        width: 200px;
        height: 250px;
        margin: 5px;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-radius: 15px;
        background: rgba(0, 0, 0, 0.85);
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        bakcdrop-filter: blur(5px);
    }

    .container .card .content h2 {
        position: fixed;
        top: 90px;
        font-size: 9px !important;
    }

    .container .card .content p {
        position: fixed;
        bottom: 10px;
        left: 10px;
        font-size: 10.2px;
    }

    .container .card .imgBx {
        position: relative;
        bottom: 80px;
        transform: scale(0.12);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 30px;
    }

    .container .card. .imgBx img {
        max-width: 100%;
        margin: 0 0 20px;
    }
    
    footer {
        position: fixed;
        width: 100%;
        background-color: black;
        color: white;
        font-weight: bold;
    }
}

Answer 1

几点观察：

首先是题中提出的问题。体有溢隐。如果删除该内容，则内容可滚动，例如Chrome 上的 Galaxy 模拟器。您需要检查这是否会影响更大的屏幕尺寸。

媒体查询不会为非常窄的视口重置任何内容（即使用户不太可能拥有屏幕非常窄的设备，任何人都可以在 windows 机器上将视口设置为他们喜欢的样子所以你可能想要满足这一点）。

您的动画消耗了我（相当高规格）笔记本电脑上的大量 GPU - 超过 65%。这不仅会使风扇发出令人讨厌的嗡嗡声，还会开始消耗用户的智能手机电池。您可能想研究以不同的方式实现动画（与我意识到的问题不同！）

如何修复 "nowhere" 出现的滚动条的自上卷效果？

How can I fix this self scroll up effect of the scrollbar that appeared from "nowhere"?

css

scrollbar

responsive-design

responsive

html