Question

我正在制作一个网站，我注意到我无法使用鼠标滚轮滚动。我可以在我的chromebook上使用双指滚动，但不能在我的电脑上使用滚轮。问题在于我使用的两种浏览器; firefox和chrome。

提前致谢，利亚姆

的CSS：

  header {
  width: 100%;
}

body {
  margin: 0;
  overflow: hidden;
}

footer {
  clear: both;
  height: 100px;
  width: 100%;
  background-color: #3d3d3d;
  position: relative;
}

.nav {
  width: 100%;
  height: 50px;
  background-color: #3D3D3D;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0)
}

.navwrap{
    position: fixed;
    width: 100%;
}

.name-logo {
  width: 100%;
  height: 350px;
  background-color: #4BD150;
  overflow: hidden;
}

.content {
  float: left;
  background-color: #f5fafa;
  padding-left: 3%;
  padding-right: 2%;
  border-right: 4px solid #F5f5f5;
  width: calc(65% - 4px);
  z-index: 1;
  height: 300px;
}

.sidebar {
  width: 30%;
  float: right;
  background-color: #f5fafa;
  height: 300px;
}

.social {
  width: 30%;
  float: right;
}

.social-icon {
  float: right;
  padding-left: 10px;
  padding-top: 15px;
  width: 35px;
}

#facebook {
  padding-right: 15px;
}

.coppyright {
  color: #fff;
  padding-left: 25px;
  width: 40%;
  float: left;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.name {
  width: 60%;
  height: 100%;
  padding-left: 100px;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.logo {
  width: 60%;
  height: 100%;
  float: right;
  white-space:nowrap;
  margin-top: 20px;
  margin-right: 20%;
  margin-left: 20%;
}
.logo-img {
  width: 100%;
  vertical-align: middle;
}

#nav {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 50px;
}
#nav li {
  float: left;
  font-family: Ubuntu, sans-serif;
  font-size: 20px;
}
#nav li a {
  display: block;
  padding-left: 15px ;
  padding-right: 15px;
  padding-top: 11px;
  text-decoration: none;    
  font-weight: bold;
  color: #fff;
  height: 50px;
  width: auto;
}
#nav li a:hover {
  color: #fff;
  background-color: #333333; 
  height: 39px;
}

#home {
  margin-left: 20px;
}

HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&amp;subset=Latin">
<title>Hackapi Mockup</title>
</head>
<!--This is where the navbar and splash title goes-->
<body><header>
<div class="navwrap">
  <div class="nav">
    <ul id="nav">
      <li id="home"><a href="default.asp">Home</a></li>
      <li><a href="news.asp">News</a></li>
      <li><a href="contact.asp">Contact</a></li>
      <li><a href="about.asp">About</a></li>
    </ul>
  </div>  
</div>
  <div class="name-logo">
    <div class="logo">
      <span class="helper"></span>
      <img class="logo-img" src="https://imagizer.imageshack.us/v2/821x224q90/674/hloZoz.png">
    </div>
  </div>
</header>
<!--Main content and sidebar-->

  <div class="content">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="sidebar">

  </div>

<!--Here is where all extra links, coppyrights and social media links go-->
<footer>
  <div class="coppyright">
    <h4>Coppyright Hackapi 2014</h4>
  </div>
  <div calss="social">
    <img id="facebook" class="social-icon" src="https://imagizer.imageshack.us/v2/128x128q90/538/Kk3S3f.png">
    <img id="twitter" class="social-icon" src="https://imagizer.imageshack.us/v2/128x128q90/913/xP6ctI.png">
    <img id="gplus" class="social-icon" src="https://imagizer.imageshack.us/v2/128x128q90/536/nkHuql.png">
    <img id="ytube" class="social-icon" src="https://imagizer.imageshack.us/v2/128x128q90/906/Sct7fy.png">
  </div>
</footer>
</body>

Answer 1

我相信这是由于这种风格：

body {
  overflow: hidden;
  margin: 0;
}

您必须删除overflow：hidden，因为它会阻止滚动条显示。

Answer 2

CSS：

overflow: auto;
OR
overflow-y: auto;

on body {}

我的网站上没有滚动条，我无法使用滚轮滚动

2 个答案: