问为什么垂直滚动会卡在移动视图中？
EN

Stack Overflow用户

提问于 2019-11-20 22:22:14

回答 1查看 5.3K关注 0票数 0

在移动视图中，当我尝试垂直滚动时，网页被卡住了。在@media screen and (max-width: 952px) {}中，我设置了overflow-x: hidden;、width: 100%;和position: absolute;，以防止水平滚动，因为移动导航栏隐藏在右侧。我尝试将overflow-y: scroll;和overflow-y: auto;添加到代码中，甚至添加了!important，但我仍然遇到垂直滚动问题。

您可以在jacpel5.dreamhosters.com上查看该网页的实时版本

“摄影”页面的HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Jacki Leigh - Photography</title> 
            <!-- title appears in browser tab -->
        <link href="myStyleSheet.css" rel="stylesheet" type="text/css">
            <!-- linking to myStyleSheet.css file for styling --> 
        <link rel="stylesheet" href="https://use.typekit.net/swe6opx.css">
            <!-- font family "Operetta 8" -->
        <link rel="stylesheet" href="https://use.typekit.net/opw2jnd.css">
            <!-- font family "Relation Two" -->
        <link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16">
            <!-- linking to the favicon -->
        <meta charset="UTF-8"> 
            <!-- UTF-8 is the default character set for HTML5 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- viewport gives browser instructions on how to control the page's dimensions and scaling -->
            <!-- width=device-width sets the width of the page to follow the screen-width of the device --->
            <!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser -->
        <meta name="robots" content="index, follow">
            <!-- allows the spider of a search engine to index the whole website -->
        <meta name="keywords" content="Jacki Leigh, photography, light painting, long exposure, music, music photography, portrait photography, portraits, panasonic, camera, photos, live music photography, live music, freelance photographer, freelance, photographer, freelance photography">
        <meta name="description" content="Jacki Leigh is an LA based freelance photographer. She specializes in concert photography and light painting.">
            <!-- Use no more than 200 characters. This is the description that appears in the search results on search engines -->
        <meta name="author" content="Jacki Leigh Designs">
    </head>
    <body>

    <header>
        <div class="container">

            <a href="index.html">
            <img src="photos/logo.png" alt="Jacki Leigh Logo" class="headerLogo">
            </a>

            <nav>
                <ul class="nav-links">
                    <!-- <li><a href="index.html">Home</a></li> -->
                    <li><a href="photography.html">Photography</a></li>
                    <li><a href="graphic-design.html">Graphic Design</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>

                <div class="burger">
                    <div class="line1"></div>
                    <div class="line2"></div>
                    <div class="line3"></div>
                </div>
            </nav>

        </div>
    </header>    

    <br />

    <div class="section">
        <ul class="grid">
            <li>
                <div class="box p-cov1">
                    <a href="concert-photography.html">
                    <div class="info">
                        <h3>Concert Photography</h3>
                    </div></a>
                </div>
            </li>
            <li>
                <div class="box p-cov2">
                    <a href="light-painting.html">
                    <div class="info">
                        <h3>Light Painting</h3>
                    </div></a>
                </div>
            </li>
            <li>
                <div class="box p-cov3">
                    <a href="portraits-people.html">
                    <div class="info">
                        <h3>Portraits & People</h3>
                    </div></a>
                </div>
            </li>
            <li>
                <div class="box p-cov4">
                    <a href="nature.html">
                    <div class="info">
                        <h3>Nature</h3>
                    </div></a>
                </div>
            </li>
            <li>
                <div class="box p-cov5">
                    <a href="animals.html">
                    <div class="info">
                        <h3>Animals</h3>
                    </div></a>
                </div>
            </li>
            <li>
                <div class="box p-cov6">
                    <a href="special-events.html">
                    <div class="info">
                        <h3>Special Events</h3>
                    </div></a>
                </div>
            </li>  
        </ul>
    </div>

    <br />
    <br />

    <footer>
        <a href="https://www.facebook.com/JackiLeighDesigns/" target="_blank">
            <img src="photos/fbicon.png" alt="Facebook Icon" class="fbIcon">
        </a>

        <a href="https://www.instagram.com/jacki_leigh/" target="_blank">    
            <img src="photos/instaicon.png" alt="Instagram Icon" class="instaIcon">
        </a>

        <br />

        <small>copyright &copy; <script type="text/javascript">document.write(new Date().getFullYear());</script> Jacki Leigh Designs</small>
        </style>
    </footer>

    <script src="javascript/app.js"></script>
    </body>
</html>

CSS：

body {
    margin: 0;
    background-color: #FCFCFC;
    font-family: "operetta 8", serif;
    font-weight: 300;
    font-style: normal;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
}

.container { /* logo and text/links in navigation bar */
    width: 90%;
    margin: 0 auto;
}

.headerLogo { /* logo in navigation bar */
    /* floating logo to the left */
    /* full canvas photo is 2057px wide & 643px in height */
    float: left;
    padding: 10px 0; /* gives a little space on top and bottom of the logo */
    width: 164.56px; /* 8% of the full size (2057px) */
    height: 51.44px; /* 8% of the full size (643px) */
}

header {
    background: #E9E9E9;
    opacity: 1;
}

header::after { 
    /* used because .logo and nav are float left/right, shrinking the container to 0px, this fixes that */
    content: '';
    display: table;
    clear: both;
}

nav {
    /* floating list (menu) items to the right */
    float: right;
}

nav ul {
    margin: 0; /* takes space off top and bottom header background */
    padding: 0; /* takes space off the sides */
    list-style: none; /* removes bullet point styling */
}

nav li {
    display: inline-block; /* places list horizontal, not vertical */
    margin-left: 30px; /* specifies the spacd between the list items */
    padding-top: 25px; /* not required - used for the hover effect for this particular nav bar */
    position: relative; /* allows the nav a::before to keep the hover line relative to the text length */
}

nav ul li a {
    color: #7F7887;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 17px;
}

nav ul li a:hover {
    color: #3f003c;
}

nav ul li a::before {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background-color: #3f003c;

    position: absolute; /* absolute width 100% shoots this to 100% of the screen size (they run together) */
    top: 0;
    width: 0%;

    transition: all ease-in-out 250ms; /* slows down the way the hover bar appears */
}

nav ul li a:hover::before {
    width: 100%;
}

a {
    text-decoration: none;
}

.burger {
    display: none;
    cursor: pointer;
    display: static;
    z-index: 200;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: #3f003c;
    margin: 5px;
    transition: all 0.5s ease; /* adds transition to Burger turning into an X */
}

.mainLogo {
    /* class for logo/image on index page */
    width: 75%;
    height: 60%;
    opacity: 0.9;
}

.mainLogoDiv {
    /* class for the div containing the logo/image on index page */
    text-align: center;
}

.section {
    max-width: 1920px;
    margin: 0 auto;
    padding: 1% 2%;
}

.grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}

.grid:after {
    clear: both;
}

.grid:after, .grid:before {
    content: '';
    display: table;
}

.grid li {
    width: 200px;
    height: 200px;
    display: inline-block;
    margin: 20px;
}

.box {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    border-radius: 5px;
    -webkit-transition: 0.3s ease-in-out, 
    -webkit-transform 0.3 ease-in-out;
    -moz-transition: 0.3s ease-in-out, 
    -moz-transform 0.3 ease-in-out;
    transition: 0.3s ease-in-out, 
    transform 0.3s ease-in-out;
}

.box:hover {
    transform: scale(1.05);
}

.p-cov1 {
    background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
    url(photos/photography/covers/mj-cover.jpg);
}

.p-cov2 {
    background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
    url(photos/photography/covers/lp-cover.jpg);
}

.p-cov3 {
    background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
    url(photos/photography/covers/pp-cover.jpg);
}

.p-cov4 {
    background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
    url(photos/photography/covers/la-cover.jpg);
}

.p-cov5 {
    background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
    url(photos/photography/covers/an-cover.jpg);
}

.p-cov6 {
    background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
    url(photos/photography/covers/se-cover.jpg);
}

.g-cov1 {
    background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
    url(photos/graphic/covers/dc-cover.jpg);
}

.g-cov2 {
    background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
    url(photos/graphic/covers/ww-cover.jpg);
}

.info {
    position: absolute;
    width: 100%;
    height: 100%;
}

.info h3 {
    font-family: "Operetta 8", serif;
    font-weight: 400;
    color: #e0e0e0;
    text-shadow: 1px 1px black;
    font-size: 20px;
    margin: 0 auto;
    padding: 85px 0px 0 0px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.photoGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minMax(250px, 1fr));
    grid-gap: 5px 5px;
    width: 90%;
    margin: auto;
}

.photoColumn {
    display: block;
}

.contact {
    margin: 0 auto;
}

.contact-me {
    text-align: center;
}

.contact-me img {
    width: 60%;
    max-width: 450px;
    padding: 10px 0 20px 0;
}

form {
    text-align: left;
    font-size: 13.5px;
    padding: 0px 20px 20px 20px; /* gives space on all text contained within border */
    margin: 0 auto;
    line-height: 30px;
    height: 80%;
    width: 70%;
    max-width: 500px;
    overflow: auto;
    text-transform: uppercase;
    color: #3f003c;
}

input[type=submit] {
    background-color: #3f003c;
    color: #E9E9E9;
    border-radius: 5px;
    height: 35px;
    width: 100px;
    font-size: 15px;
    text-transform: uppercase;
}

/* the below syntax removes the blue border in the input boxes when selected */
input:focus, textarea:focus, select:focus {
    outline-offset: 0px !important;
    outline: none !important;
}

/* the two syntaxes below change the color of highlighted text */
::selection {
    background: #E9E9E9; /* WebKit/Blink Browsers */
}

::-moz-selection {
    background: #E9E9E9; /* Gecko Browsers */
}

/* the below set of syntaxes removes the background color when autofill is used */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

#name {
    height: 30px;
    width: 100%;
}

#email {
    height: 30px;
    width: 100%;
}

#message {
    height: 60px;
    width: 100%;
}


footer {
    color: #7F7887;
    text-align: center;
    text-decoration: none;
}

.fbIcon {
    /* class for the facebook icon in the footer */
    padding: 0 2px 8px 0;
    width: 25px;
    height: 25px;
    opacity: .7;
}

.instaIcon {
    /* class for the instagram icon in the footer */
    padding: 0 0 8px 0;
    width: 25px;
    height: 25px;
    opacity: 0.7;
}

@media screen and (max-width: 952px) {      
    .nav-links {
        position: absolute;
        right: 0px;
        height: 100%;
        top: 70px;
        background-color: #E9E9E9;
        opacity: .95;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 35%;
        transform: translateX(100vw);
        transition: transform 0.5s ease-in;
        z-index: 100;
    }

    .nav-links li {
        margin-left: 0px;
        opacity: 0;
        padding: 45px 0px 0px 0px;
    }

    .nav-links li a {
        color: #7F7887;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 14px;
    }

    .nav-links li a:hover {
        color: #3f003c;
    }

    nav ul li a::before {
        display: none;
    }

    .burger {
        display: block;
        padding: 20px;
        z-index: 150;
        position: static;
    }
}

.nav-active {
    transform: translateX(0%);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0px); 
    }
}

/* 3 code blocks below are to set up the hamburger menu to turn into an X once it's been clicked and the menu slides in from the right */

/* this takes the top hamburger line and turns it -45 degrees to form one part of the X */
.toggle .line1 {
    transform: rotate(-45deg) translate(-5px,6px);
}

/* this takes the middle hamburger line and turns it to 0 opacity */
.toggle .line2 {
    opacity: 0;
}

/* this takes the bottom hamburger line and turns it 45 degrees to form the second part of the X */
.toggle .line3 {
    transform: rotate(45deg) translate(-5px,-6px);
}

JavaScript：

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

    burger.addEventListener('click', () => {
        //Toggle Nav
        nav.classList.toggle('nav-active');

        //Animate Links
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = ''
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
            }
        });

        //Burger Animation
        burger.classList.toggle('toggle');
    });

}

navSlide();

vertical-scrolling

javascript

html

css

mobile

回答 1

Stack Overflow用户

发布于 2019-11-20 22:40:02

我认为你的问题是你的滚动设置@media screen and (max-width: 952px)同时针对html和body元素-这会导致滚动效果中的滚动，这在移动视图中可能是错误的。

我能够在检查器中修复这个问题，方法是删除html，将body样式移到媒体查询之外，并将.nav-links样式中的transform行从100%更改为100vw。它们在此场景中的工作方式应该是相同的，但vw (视口宽度)似乎工作得更好。

    body {
        height: 100%;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    @media screen and (max-width: 952px) {
        .nav-links {
            transform: translateX(100vw);
        }
    }