javascript - 查看响应式时的空白

问题描述

我不确定这是否是一个错误，但在 chrome 浏览器中查看事物的响应方面时，我会看到空格（有时）。我有时会说，因为我的网站在我刷新时会自行修复。此问题仅在使用响应式端时发生。图像就是我的样子。

const fade = document.querySelectorAll('.fade');

window.addEventListener('scroll', checkBoxes);

checkBoxes();

function checkBoxes() {
    const triggerBottom = window.innerHeight / 3.5 * 4;

    fade.forEach(fade => {
        const fadeTop = fade.getBoundingClientRect().top;

        if(fadeTop < triggerBottom) {
            fade.classList.add('show');
        } else {
            fade.classList.remove('show');
        }
    })
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
    --shade-background: #FAFAFA;
}

ul {
    list-style-type: none;
}

body {
    background-color: #fff;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}

.intro-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.intro-container::before {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-image: url(../images/airpods.jpg);
    background-size: cover;
    background-position:center;
    opacity: .9.5;
}

.intro-container .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    z-index: 1;
}

.content h1 {
    font-size: 5em;
    font-weight: 600;
    margin-bottom: 10px;
}

.content p {
    margin-bottom: 20px;
    font-size: .9rem;
    margin-right: 5px;
}


/* MAIN CONTENT*/

.chapternav {
    background: rgba(245,245,247,0.7);
    padding: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    height: 100px;
    z-index: 9987;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.chapternav-wrapper {
    position: relative;
    height: 100%;
    z-index: 1;
}

.chapternav-items {
    margin: 0 34px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    list-style: none;
    padding-bottom: 50px;
}

.chapternav-item {
    display: inline-block;
    vertical-align: top;
    margin: 0 -.11765em;
    padding: 0 20px;
}

.chapternav-label {
    font-size: 12px;
    line-height: 1.33337;
    font-weight: 400;
    letter-spacing: -.01em;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    display: block;
    margin: 0;
    font-size: 17px;
}



/* nav items */

.container {
    margin: 0 auto; /* this will center the page */
    max-width: 960px; /*  use your width here */
}

.container h2 {
    text-align: center;
    padding: 2rem;
}

.fade {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: var(--shade-background);
    margin-bottom: 2rem;
    flex-wrap: wrap;
    height: 450px;
    transform: translateX(400%);
    transition: transform 2s ease;
    /* animation: fadeIn  4s; */
}

.fade h3 {
    margin-bottom: 1rem;
    font-size: 40px;
    line-height: 1.1;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    font-weight: 600;
    letter-spacing: 0em;
}

.fade p {
    max-width: 300px;
    font-size: 17px;
    line-height: 1.23536;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    font-weight: 600;
    margin: 15px 0;
}

.fade img {
    width: 400px;
    height: 300px;
    border-radius: 5px;
}

.learn-copy {
    color: #0071e3;
    margin-top: 3rem;
    cursor: pointer;
}

.icon-arrow {
    color: #0071e3;
    cursor: pointer;
}

.learn-copy:hover {
    text-decoration: underline;
}


/* javascript */

.fade:nth-of-type(even) {
    transform: translateX(-400%);
}

.fade.show {
    transform: translateX(0);
}

@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }

/* end of javascript */

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
        <link href="https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;600&display=swap" rel="stylesheet">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="intro-container">
        <div class="content">
            <h1>AirPods</h1>
            <p>Don't Just Listen, Feel It</p>
            <!-- <button>Explore</button> -->
            <!-- <i class="fa fa-arrow-down"></i> -->
        </div>
    </div>

    <nav class='chapternav'>
        <div class="chapternav-wrapper">
            <ul class="chapternav-items">
                <li class="chapternav-item">
                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMSAxM2gtMXYtMWgxdjF6bTIyLTFoLTF2MWgxdi0xem0tMjAtMWgtMXYzaDF2LTN6bTE4IDBoLTF2M2gxdi0zem0tMTQgMGgtMXYzaDF2LTN6bTEwLTFoLTF2NWgxdi01em0tMTIgMGgtMXY1aDF2LTV6bTE0LTFoLTF2N2gxdi03em0tMTAgMGgtMXY3aDF2LTd6bTItMmgtMXYxMGgxdi0xMHptNCAwaC0xdjEwaDF2LTEwem0tMi0yaC0xdjE0aDF2LTE0eiIvPjwvc3ZnPg==">
                    <span class='chapternav-label'>AirPods</span>
                <li class="chapternav-item">
                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMSAxM2gtMXYtMWgxdjF6bTIyLTFoLTF2MWgxdi0xem0tMjAtMWgtMXYzaDF2LTN6bTE4IDBoLTF2M2gxdi0zem0tMTQgMGgtMXYzaDF2LTN6bTEwLTFoLTF2NWgxdi01em0tMTIgMGgtMXY1aDF2LTV6bTE0LTFoLTF2N2gxdi03em0tMTAgMGgtMXY3aDF2LTd6bTItMmgtMXYxMGgxdi0xMHptNCAwaC0xdjEwaDF2LTEwem0tMi0yaC0xdjE0aDF2LTE0eiIvPjwvc3ZnPg==">
                    <span class='chapternav-label'>AirPods</span>                    
                </li>
                <li class="chapternav-item">
                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMSAxM2gtMXYtMWgxdjF6bTIyLTFoLTF2MWgxdi0xem0tMjAtMWgtMXYzaDF2LTN6bTE4IDBoLTF2M2gxdi0zem0tMTQgMGgtMXYzaDF2LTN6bTEwLTFoLTF2NWgxdi01em0tMTIgMGgtMXY1aDF2LTV6bTE0LTFoLTF2N2gxdi03em0tMTAgMGgtMXY3aDF2LTd6bTItMmgtMXYxMGgxdi0xMHptNCAwaC0xdjEwaDF2LTEwem0tMi0yaC0xdjE0aDF2LTE0eiIvPjwvc3ZnPg==">
                    <span class='chapternav-label'>AirPods</span>                    
                </li>                
            </ul>
        </div>
    </nav>

    <div class="container">
        <h2>Wireless to the Fullest</h2>
            <div class="fade">
                    <img src="../images/earphonesbackdrop.jpg" alt="">
                <div class="text">
                    <h3>Get 3% <br>Daily Cash back <br>
                        with Apple Card.</h3>
                    <p>Consectetur adipisicing elit. 
                        Asperiores pariatur modi quis omnis non obcaecati inventore 
                        ad amet voluptates commodi. etxcepturi, illum.</p>
                    <span class="learn-copy">Learn more</span>
                </div>
            </div>
            <div class="fade">
                <div class="text">
                    <h3>Say it in a way <br>only you can.</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                        Asperiores pariatur commodi. etxcepturi, illum modi amet.</p>
                    <span class="learn-copy">Learn more</span>
                </div>
                    <img src="../images/airpods2.jpg " alt="">
                </div>
            <div class="fade">
                <img src="../images/airpods3.jpg " alt="">
                <div class="text">
                    <h3>Magic runs <br>in the family.</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                        Asperiores pariatur commodi. etxcepturi, illumdolar illum.</p>
                    <span class="learn-copy">Learn more</span>
                </div>
            </div>                      
    </div>
<script src='script.js'></script>
</body>
</html>

标签： javascripthtmlcss

javascript - 查看响应式时的空白

问题描述

解决方案

推荐阅读