Html页面不滚动？ CSS

问题描述：

 $(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导致此问题。而是使用

overflow-x: hidden;

到禁用仅的水平滚动。

DEMO

你必须控制两个，垂直和水平滚动，使用x和y轴的能力。

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

您可以同时针对使用overflow在同一时间分别使用overflow-x，和overflow-y，或两者兼而有之。您可以设置的值为：

auto;

scroll;

可见;

隐藏;

initial;

继承;

no-display;

no-content;

Read more about it at w3schools

感谢您的快速回答。这工作完美！ –

它会让我在1分钟:) –

答

变化这在你的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

答

只是删除

overflow : hidden;

这件事情使你的页面向下滚动如果你不想下来显示您的页面滚动，然后只需要将此CSS属性添加到body标签

Html页面不滚动？ CSS

相关推荐