登录
当前位置： 首页 > 知识库问答 >
问题：

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

梁浩
2023-03-14

在移动视图中，当我尝试垂直滚动时，网页被卡住。在@媒体屏幕和（最大宽度：952px）{}中，我有溢出-x:hidden ，宽度：100% 和位置：绝对 设置以防止水平滚动，因为移动导航栏隐藏在右侧。我试图添加overflow-y:scroll 和溢出-y：自动 添加到代码中，甚至添加了！重要信息，我仍然遇到垂直滚动问题。

您可以在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();

共有1个答案

佟翰林
2023-03-14

我认为您的问题在于，您的滚动设置@媒体屏幕和（最大宽度：952px）同时针对html和body元素，这会导致滚动效果中出现滚动，在移动视图中可能会出现问题。

我可以在inspector中通过删除html将正文样式移动到媒体查询之外，并更改中的转换行来解决这个问题。导航链接样式从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);
        }
    }
 类似资料：
  • DIV垂直滚动条在左侧

    问题内容： 是否可以使用CSS将DIV的垂直滚动条放在div的左侧？那jscript呢？ 问题答案： 您可以使用JQuery和此插件在任意位置添加伪滚动条：JScrollPane

  • 使回收器视图可垂直滚动

    我正在使用下面的代码创建一个回收器视图。recyclerview有一个网格布局管理器，其项计数最多为每行2个。 不幸的是，我嵌套在ConstraintLayout中的回收器视图根本没有滚动。我错过了什么？约束布局是否支持相同的？

  • 为什么主容器上有垂直滚动？

    问题内容： 我在这里很困惑。由于s 是100％（宽度/高度），也是100％（宽度/高度），为什么会有垂直滚动？ 我创建了一个jsFiddle来解释这种情况 谢谢你们 问题答案： 默认情况下，标签的边距取决于浏览器（例如chrome），您必须通过

  • 在垂直滚动条溢出时生成水平滚动条

    我在一个大型遗留系统中工作，系统中有数千个页面，动态生成的表格数据被填充到html中，定义格式如下： 我的任务是移除不必要的小水平滚动条，这些滚动条似乎使系统感到困惑。经过一段时间的研究，我意识到当表格数据量垂直溢出包含的div并导致垂直滚动条出现时，新生成的垂直滚动条本身会推入div的内容区域，从而导致表格数据水平溢出，从而导致不希望出现的水平滚动条。换句话说，当垂直滚动条出现时，它会侵入内容空

  • 在垂直滚动条溢出时生成水平滚动条

    我在一个大型遗留系统中工作，系统中有数千个页面，动态生成的表格数据被填充到html中，定义格式如下： 我的任务是移除不必要的小水平滚动条，这些滚动条似乎使系统感到困惑。经过一段时间的研究，我意识到当表格数据量垂直溢出包含的div并导致垂直滚动条出现时，新生成的垂直滚动条本身会推入div的内容区域，从而导致表格数据水平溢出，从而导致不希望出现的水平滚动条。换句话说，当垂直滚动条出现时，它会侵入内容空

  • 垂直滚动视图内的水平循环视图

    所以我在垂直ScrollView中有一个水平回收器视图。我的布局中的所有内容都显示得很好，并且都按照我想要的方向滚动，并且它做得很好。 我唯一的问题是，RecyclerView位于ScrollView中其他内容的下方，当RecyclerViewer部分可见时，它会在启动时将RecyclerView的底部与屏幕的底部对齐。这意味着RecyclerView上方的内容被推离屏幕。 有谁知道为什么会发生这

相关问答

Android滚动视图不会一直向下滚动自定义jFileChooser垂直滚动条无对角线滚动垂直水平滚动视图->表格布局HTML不让垂直滚动条创建水平滚动条[重复]滚动条移动粗糙时激活快速滚动在Android列表视图

相关文章

Tkinter，Python中框架的垂直滚动条vw为什么将滚动条包含在视口中？隐藏html水平但不垂直的滚动条如何始终在浏览器中显示垂直滚动条？使用CSS使div垂直滚动

相关阅读

MySQL视图是什么？Bootstrap 滚动监听Bootstrap4 滚动监听中国移动移动云（苏小妍）运维凉经Websocket移动APP

相关工具

视差滚动视图循环滚动视图Yii Framework 公告滚动条 Widget会转动的饼图jQuery的垂直Slideshow

相关文档

SUI 移动开发UI库DWZ 移动端开发文档fbreader 和 移动 DM 和 加解密百度移动统计帮助手册深信服移动终端 EasyApp SDK 介绍
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.