Question

＆＃13;

      $(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;
            }
          }
        });
      });

＆＃13;

#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%;
  }
}

＆＃13;

<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>

＆＃13;

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

我认为这是＆＃39;溢出：隐藏; ＆＃39;这部分代码的一部分：

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

但我需要＆＃39;溢出：隐藏; ＆＃39;为了使侧栏打开而不增加页面的宽度，我将如何将其应用于侧面菜单而不是正文？我一直试图弄清楚它几个小时，我仍然无法找到如何做到这一点。

任何帮助赞赏。

Answer 1

正如您所说，overflow: hidden会导致此问题。而是使用

overflow-x: hidden;

到仅禁用 水平滚动。

DEMO

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

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

您可以使用overflow-x同时使用overflow-y和overflow，或同时使用jQuery.fn.popover同时定位。您可以设置的值是：

汽车;

滚动;

可见的;

隐藏;

初始;

继承;

无显示;

无内容;

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;
 }

基本上在overflow: hidden;标记上使用<body>，您告诉网络浏览器隐藏超出用户屏幕的任何内容，从而无需使用滚动条。

Here is the JSFiddle demo

Answer 3

只需删除

即可

overflow : hidden;

这件事会导致您的页面向下滚动如果您不想向下滚动显示页面，则只需要将此CSS属性添加到正文标记

Html页面没有向下滚动？ CSS

3 个答案: