Question

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

我尝试为Overflow添加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>

要么没有显示滚动条，要么显示完全灰色的我不能使用。

Answer 1

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

页面灰色滚动条而不滚动

1 个答案: