javascript - 网页刷新时抖动

问题描述

我的网站上有一个问题让我抓狂。当我刷新页面时，它会抖动。文本的行为就像它压缩然后恢复正常。我不知道是什么原因造成的。我删除了 90% 的代码，但问题仍然存在。我将不胜感激解决这个谜团的任何帮助。代码如下。

function myFunction() {
    var x = document.getElementById("topLinks");
    if (x.style.display === "block") {
            x.style.display = "none";
    } 
    else {
    x.style.display = "block";
    }
}

function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";

}

@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300;400;700&display=swap');

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: url(img/background.png) fixed;
}

.abbr {
    cursor: help;
}









/* CONTENT DIV */

.content {
    max-width: 75%;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 1.6em;
    font-family: 'Noto Serif', serif;
    background: rgba(78, 192, 253, .7);
    overflow: hidden;
    padding: 1em;
    text-align: left;
    min-height: 100%;
    font-size: 1.6em;
}
/** SIDEBAR **/

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidebar a:hover {
    color: #f1f1f1;
}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 24px;
    font-size: 32px;
    margin-left: 50px;
}

/* Style the list */
ul.breadcrumb {
    padding: 12px 18px;
    list-style: none;
    background-color: #0288d1;
    border-radius: 18px;
    margin-top: 12px;
    font-family: 'Noto Serif', serif;
}

.openbtn:before {
content: url("data:image/svg+xml,%3Csvg class='bi bi-list' width='1em' height='1em' viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M2.5 11.5A.5.5 0 013 11h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 7h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 3h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5z' clip-rule='evenodd' /%3E%3C/svg%3E");

}
.openbtn {
    padding: 8px;
    font-size: 24px;
    cursor: pointer;
    background-color: #111;
    color: white;
    border: none;
    border-radius: 18px;
    font-family: 'Noto Serif', serif;
}

.openbtn:hover {
    background-color: #444;
}

/* Display list items side by side */
ul.breadcrumb li {
    display: inline;
    font-size: 24px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li + li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
    color: #fff;
    text-decoration: underline;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
    text-decoration: none;
}

ul.breadcrumb li a:focus {
    background-color: #01314c;
    text-decoration: none;
}

ul.breadcrumb li a:active {
    color: #fff;
    text-decoration: underline;
}

<!DOCTYPE html>
<html lang="ru">

<head prefix="og: http://ogp.me/ns#">
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html">
    <title>Title here</title>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="style_main.css">
    <link rel="stylesheet" href="style_nav.css">
    
    
    <link rel="stylesheet" href="style_accordion.css">
    <!-- Stylesheets -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    

    <script type="text/javascript" src="js_nav.js">
    </script>
    
</head>
<a name="top"></a>

<body>

    <div id="mySidebar" class="sidebar">
        <a href="javascript:void(0);" class="closebtn" onclick="closeNav()">X</a>
        <a tabindex="1" href="index.html">Main</a>
        <a tabindex="2" href="about">About</a>
       
        
    </div>

    <div class="main">
        <div class="header">
            <nav>
                <ul class="breadcrumb">
                
                    <li>
        <button class="openbtn" onclick="openNav()">Menu</button>
                    </li>
                
                    <li><a tabindex="7" href="index.html">Main</a></li>
                    <li>Breadcrumb</li>
                </ul>
            </nav>
        </div>

    
        <div class="content">
            <h1 class="h1">Heading 1</h1>
            <h2 class="h2">Heading 2</h2>
            <p class="subheadline">Headline
            </p>
           
           <p>some stuff</p> 
            <br>
            <button class="accordion">Open:</button>
            <div class="panel">
                <ul class="skills">
                    <li>text here</li>

                </ul>
            </div>
          
        </div> 


            <a href="#top">
                <div class="pagetop"><svg width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z" clip-rule="evenodd" />
                        <path fill-rule="evenodd" d="M4.646 7.854a.5.5 0 00.708 0L8 5.207l2.646 2.647a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708z" clip-rule="evenodd" />
                        <path fill-rule="evenodd" d="M8 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z" clip-rule="evenodd" />
                    </svg><br>Top
                </div>
            </a>
        </div>

       
       
       
</body></html>

标签： javascripthtmlcss

javascript - 网页刷新时抖动

问题描述

解决方案

推荐阅读