时间戳

首页 > 解决方案 > 页面灰色滚动条且不滚动

html - 页面灰色滚动条且不滚动

问题描述

我目前面临的问题是我无法让我的 HTML 页面滚动。

我尝试为溢出添加 CSS 属性（滚动、自动、可见等），但我没有设法让我的页面可缩放。在这一点上，我认为我做错了一件完全微不足道的事情，我在这里添加了一些文字来满足单词计数器..

html * {
  font-family: Gill Sans MT!important;
  overflow: visible;
}

body {
  background-color: #3d3c3a;
  color: #333333;
  font-family: "Gill Sans";
  overflow-y: auto;
}

.logo {
  float: left;
  position: fixed;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  margin-top: 15px;
  margin-left: 300px;
  position: fixed;
}

.topnav a {
  float: left;
  display: block;
  color: #47c6e6;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #e0640b;
  color: white;
}

.topnav .icon {
  display: none;
}

.maintext h1 {
  color: azure;
  margin-top: 150px;
  position: fixed;
  font-size: 150px;
  font-family: "courier new"!important;
  font-weight: 100;
}

.mainimg {
  margin-top: 750px;
  margin-left: 750px;
  position: fixed;
}

.sidetext {
  color: azure;
  font-family: "Corbel Light"!important;
  margin-top: 550px;
  position: fixed;
  margin-left: 60px;
  font-weight: 50;
  margin-right: 1200px;
}

.line {
  color: darkorange;
  position: fixed;
  margin-left: 270px;
  margin-right: 100px;
  margin-top: 1000px;
}

.maintest {
  color: azure;
  margin-top: 1150px;
  position: fixed;
  font-size: 150px;
  font-family: "courier new"!important;
  font-weight: 100;
}
<img class="logo" alt="Liftsnetwork Logo" src="assets/ln.png" />
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">Discover</a>
  <a href="#contact">Gallery</a>
  <a href="#about">Search</a>
  <a href="#about">Help</a>
  <a href="#about">Add</a>
  <a href="#about">Account</a>
  <a href="#add">Discord</a>
  <a href="#about">Forum</a>
</div>
<div class="maintext" id="mymaintext">
  <h1>Find Lifts around the Globe.</h1>

</div>

<img class="mainimg" alt="Map screenshot" src="assets/mappic.png" />

<h1 class="sidetext">Insert lorem ipsum text here that doesn't make the slightest bit of sense and is just here to act as a placeholder. Insert lorem ipsum text here that doesn't make the slightest bit of sense and is just here to act as a placeholder.Insert lorem ipsum text
  here that doesn't make the slightest bit of sense and is just here to act as a placeholder.Insert lorem ipsum text here that doesn't make the slightest bit of sense and is just here to act as a placeholder.</h1>

<h1 class="line">__________________________________________________________________________</h1>

</div>
<div class="maintest" id="mymaintext">
  <h1>Insert lorem ipsum text here that doesn't make the slightest bit of sense and is just here to act as a placeholder.Insert lorem ipsum text here that doesn't make the slightest bit of sense and is just here to act as a placeholder.Insert lorem ipsum
    text here that doesn't make the slightest bit of sense and is just here to act as a placeholder.</h1>

</div>

要么没有滚动条出现，要么完全灰色的滚动条显示我无法使用。

标签： htmlcss

解决方案

穿上元素会禁用滚动overflow:visible。html完全删除或更改为overflow:auto，一切正常。

推荐阅读