文章/答案/技术大牛

发布

社区首页 >问答首页 >我怎样才能修复从“无处可寻”中出现的滚动条的自滚动效果？

问我怎样才能修复从“无处可寻”中出现的滚动条的自滚动效果？
EN

Stack Overflow用户

提问于 2021-07-26 15:18:28

回答 1查看 34关注 0票数 0

最近我试图让我的页面响应智能手机，这个页面在电脑上可以正确显示：

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

下面我将分享这个页面的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;
    }
}

css

responsive-design

scrollbar

responsive

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-26 15:46:05

以下是一些观察结果：

首先是问题中提出的问题。正文有溢出-隐藏。如果将其删除，则内容在Chrome上的Galaxy模拟器上是可滚动的。你需要检查这不会影响较大的屏幕尺寸。

媒体查询不会为非常窄的视窗重置任何内容(即使用户不太可能有一个屏幕非常窄的设备，任何人都可以在windows机器上将视窗设置为他们喜欢的样子，因此您可能想要迎合这一点)。

你的动画在我的(相当高规格的)笔记本电脑上消耗了大量的GPU -超过65%。这不仅会让风扇发出烦人的呼呼声，还会开始消耗用户的智能手机电池。您可能希望以不同的方式实现动画(我意识到，这是一个与所问的问题不同的问题！)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68525861

复制

相似问题

问我怎样才能修复从“无处可寻”中出现的滚动条的自滚动效果？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我怎样才能修复从“无处可寻”中出现的滚动条的自滚动效果？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我怎样才能修复从“无处可寻”中出现的滚动条的自滚动效果？
EN