Html 页面没有向下滚动？ CSS

Question

      $(window).load(function() {
        $("[data-toggle]").click(function() {
          var toggle_el = $(this).data("toggle");
          $(toggle_el).toggleClass("open-sidebar");
        });
        $(".swipe-area").swipe({
          swipeStatus: function(event, phase, direction, distance, duration, fingers) {
            if (phase == "move" && direction == "left") {
              $(".container").addClass("open-sidebar");
              return false;
            }
            if (phase == "move" && direction == "right") {
              $(".container").removeClass("open-sidebar");
              return false;
            }
          }
        });
      });

#headerMenu {
  width: 100%;
  height: 65px;
  background-color: #212021;
}
#logo a {
  color: #FFFFFF;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 25px;
  background-color: #212021;
  position: absolute;
  top: 14px;
  left: 10px;
}
#page-content {
  position: absolute;
  top: 100px;
  padding: 100px;
}
#headerMenu img {
  width: 40px;
  height: 40px;
  background-color: #212021;
  padding-top: 5px;
  position: absolute;
  top: 7px;
  left: 70%;
}
#menu img {
  width: 50px;
  height: 50px;
  background-color: #212021;
  top: -2px;
  left: 85%;
}
body,
html {
  margin: 0;
  overflow: hidden;
  font-family: helvetica;
  font-weight: 100;
}
.container {
  position: relative;
  width: 100%;
  left: 0;
  -webkit-transition: left 0.4s ease-in-out;
  -moz-transition: left 0.4s ease-in-out;
  -ms-transition: left 0.4s ease-in-out;
  -o-transition: left 0.4s ease-in-out;
  transition: left 0.4s ease-in-out;
}
.container.open-sidebar {
  left: 240px;
}
.swipe-area {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #FFFFFF;
  z-index: 0;
}
#sidebar {
  background: #212021;
  position: absolute;
  width: 240px;
  height: 100%;
  left: -240px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#sidebar ul li {
  margin: 0;
}
#sidebar ul li a {
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 100;
  color: white;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #212021;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  -ms-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
  background: #212021;
}
.main-content {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: relative;
}
.main-content .content {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding-left: 60px;
  width: 100%;
}
.main-content .content h1 {
  font-weight: 100;
}
.main-content .content p {
  width: 100%;
  line-height: 160%;
}
.main-content #sidebar-toggle {
  background: #212021;
  border-radius: 3px;
  display: block;
  position: relative;
  padding: 10px 7px;
  float: left;
}
.main-content #sidebar-toggle .bar {
  display: block;
  width: 18px;
  margin-bottom: 3px;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child {
  margin-bottom: 0;
}
/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-width: 200px) and (max-width: 300px) {
  #logo a {
    color: #FFFFFF;
    text-decoration: none;
    font-family: "Oxygen", Helvetica, Arial, sans-serif;
    font-size: 23px;
    background-color: #212021;
    position: absolute;
    top: 8px;
    left: 10px;
  }
  #headerMenu img {
    width: 37px;
    height: 37px;
    background-color: #212021;
    position: absolute;
    top: 7px;
    left: 65%;
  }
  #menu img {
    width: 45px;
    height: 45px;
    background-color: #212021;
    top: -2px;
    left: 80%;
  }
}
@media only screen and (min-width: 0px) and (max-width: 200px) {
  #logo a {
    color: #FFFFFF;
    text-decoration: none;
    font-family: "Oxygen", Helvetica, Arial, sans-serif;
    font-size: 19px;
    background-color: #212021;
    position: absolute;
    top: 15px;
    left: 5px;
  }
  #headerMenu img {
    width: 35px;
    height: 35px;
    background-color: #212021;
    position: absolute;
    top: 7px;
    left: 60%;
  }
  #menu img {
    width: 40px;
    height: 40px;
    background-color: #212021;
    top: -2px;
    left: 75%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world
  Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</p>

我正在制作一个网站来学习 css、html 和 javascript。它看起来非常好并且运行良好，然后我添加了侧边菜单，但它不允许我向下滚动页面。这是代码：

我认为是' overflow: hidden; ' 这部分代码：

    body, html {
        margin: 0;
        overflow: hidden;
        font-family: helvetica;
        font-weight: 100;
    }

但我需要' overflow: hidden; ' 使侧边栏打开而不增加获取页面的宽度，我如何将它应用于侧边菜单而不是正文？几个小时以来，我一直在努力解决这个问题，但我仍然不知道该怎么做。

感谢任何帮助。

Answer 1

正如您所说，overflow: hidden 导致了这个问题。而是使用

overflow-x: hidden;

仅禁用水平滚动。

DEMO

您可以使用 x 和 y 轴控制垂直和水平滚动。

.......|.......
.......y.......
.......|.......
–––––––––––x–––
.......|.......
.......|.......
.......|.......

您可以使用 overflow-x 和 overflow-y 分别定位两者，或使用 overflow 同时定位两者。您可以设置的值是：

auto;

scroll;

visible;

hidden;

initial;

inherit;

no-display;

no-content;

Read more about it at w3schools

Answer 2

在您的 CSS 代码中更改此设置：

 body, html {
     margin: 0;
     overflow: hidden;
     font-family: helvetica;
     font-weight: 100;
 }

对此：

 body, html {
     margin: 0;
     font-family: helvetica;
     font-weight: 100;
 }

基本上在您的 <body> 标签上使用 overflow: hidden;，您告诉网络浏览器隐藏用户屏幕之外的任何内容，这样就不需要滚动条了。

Here is the JSFiddle demo

Answer 3

只需删除

overflow : hidden;

这个东西会导致你的页面向下滚动如果你不想显示你的页面向下滚动那么只需要将这个 CSS 属性添加到正文标签

Html 页面没有向下滚动？ CSS

Html Page not Scrolling Down? CSS

html

javascript

css

scroll