如何让页面停止垂直滚动？

我有一个非常讨厌的问题。我试图创建一个完整的背景图片，调整和填充浏览器屏幕的页面。目前它的一半工作，但由于某种原因，必须向下滚动20-30px。用户不应该能够做什么。如何让页面停止垂直滚动？

这是页面的源代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link href="/Content/css/reset.css" rel="stylesheet" type="text/css" /> 
    <link href="/Content/css/Site.css" rel="stylesheet" type="text/css" /> 
    <link href="/Content/css/menu.css" rel="stylesheet" type="text/css" /> 
    <link href="/Content/css/layout.css" rel="stylesheet" type="text/css" /> 
     <link href="/Content/css/scroll.css" rel="stylesheet" type="text/css" /> 
    <script src="/Scripts/jquery-1.6.4.js" type="text/javascript"></script> 
    <script src="/Scripts/backstretch.js" type="text/javascript"></script> 

    <script type="text/javascript">  

    /**  var images = [ 

     "/content/images/bghome.jpg", 

     "/content/images/background.jpg" 

     ];  

     var index = 0;  
     $.backstretch(images[index], { speed: 500 }); 

     setInterval(function() { 

      index = (index >= images.length - 1) ? 0 : index + 1; 

      $.backstretch(images[index]); 

     }, 5000); 
    **/ 
     $.backstretch("/content/images/background.jpg"); 
    </script> 
</head>  
     <div class="menu-link"> 

<ul> 

    <li> 
    <a href="/Home/Index">home</a> 
    </li> 
    <li> 
    <a href="/content/1/10/background.html">profile</a> 
    </li> 
    <li> 
    <a href="/content/1/3/portfolio.html">portfolio</a> 
    </li> 
    <li> 
    <a href="/news/">news</a> 
    </li> 
    <li> 
    <a href="/project/">current projects</a> 
    </li> 
    <li class="on"> 
    <a href="/content/1/6/awards.html">awards</a> 
    </li> 
    <li> 
    <a href="/ContactUs/">contact</a> 

    </li> 

</ul>  </div> 

    <div id="left-sidebar"> 

     <div id ="logo"> 

      <image src="/content/images/logo.png"/> 
     </div> 
     <div id = "leftcontent"> 
      <p> 
      </p> 
     </div>    
     <div id ="foot"> 
<ul> 
    <li> 
    <a href="/content/2/20/privacy.html">Privacy</a> 
    </li> 
    <li> 
    <a href="/content/2/21/sitemap.html">Sitemap</a> 
    </li> 
    <li class="last"> 
    <a href="/content/2/19/terms---conditions.html">Terms & Conditions</a> 
    </li> 
</ul> 
© 2012 SH Structures. All rights reserved. &nbsp;&nbsp;&nbsp;<image src="/content/images/footimg.png"/> 
     </div> 
    </div> 
      <div id="right-sidebar"> 
      </div> 
      <div id="content"> 
       <div id = "freestylecontent"> 
        <h1>awards</h1> 
        <br><br><br> 
        <div id = "freecontent"> 
         <p> 
         </p> 
         <br><br> 
        </div> 
       </div>  
      </div> 
</html>

的CSS：

html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0px; 
    margin: 0px; 
} 

body { 

} 

/* IE7 Fix */ 
* html #container { 
    display: table; 
    height: 100% 
} 

/* Opera Fix */ 
body:before { 
    content: ""; 
    height: 100%; 
    float: left; 
    width: 0; 
    margin-top: -32767px; 
} 

/* IE6 Fix */ 
* html div#body { 
    overflow: visible; 
} 

div#container { 
    height: 100%; 
    height: auto !important; 

    background: url("left-sidebar-back.gif") repeat-y top left; 
} 

div#main { 
    overflow: auto; 
    padding-bottom: 100px; 
} 

div#header { 
    height: 100px; 
    background: #ba6f19; 
    border-bottom: 1px solid #000; 
    padding: 20px; 
} 

div#body { 
    overflow: hidden; 
    height: 100%; 
} 

div#content { 
    margin: 0px 0px 0px 415px; 
    width: 375px; 
    padding: 20px; 
    background:url(../images/greenfade.png); 
    opacity:0.8; 
    height:100%; 
    color:White; 
} 

div#left-sidebar { 
    width: 375px; 
    float: left; 
    height:100%; 
    padding: 20px; 
    background:black; 
    opacity:0.8; 
    color:White; 
} 

div#right-sidebar { 
    width: 260px; 
    float: right; 
    padding: 20px; 
} 

div#footer { 
    background: #ba6f19; 
    border-top: 1px solid #000; 

    position: relative; 
    height: 100px; 
    margin-top: -101px; 
    clear: both; 
} 

div#footer p { 
    padding: 20px; 
    margin: 0px; 
} 
.menu-link{ 
    font-size:1em; 
    height:40px; 
    padding-left:10px; 
    width:100%; 
    margin-left:auto; 
    margin-right:auto; 
    background:black; 

} 

.menu-link a{ 
    padding: 10px 0px 10px 0px; 
    height:40px; 
    color:#fff; 
    text-decoration:none; 
    float:left; 
} 

.menu-link ul { 
    padding:0px 0px 0px 20px; 
} 

.menu-link ul li  
{ 
    text-decoration:none; 
    float:left; 
    /**background: url(/Content/img/border-line-inside.png) no-repeat right;**/ 
} 

.menu-link ul li a { 
    color:#fff; 
    padding: 0px 10px 0px 10px; 
    line-height:40px; 
    display: block; 
    text-align:center; 
} 

.menu-link a:hover{ 
    background:url(../images/menu-nav-hov.png) repeat-x; 
    cursor:pointer; 
} 

.menu-link ul li.on { 
    background:url(../images/menu-nav-hov.png) repeat-x; 
/** background-position:center bottom; 
    background-repeat:no-repeat; 
**/ 
} 

/** Side Menu **/ 

.sideMenu ul li.on a 
{ 
    height:2em; 
    padding-top: 2px; 
    background:url(../images/point.png) no-repeat; 
    font-weight:bold; 
} 

.sideMenu ul 
{  
    padding: 15px 0px 0px 0px; 
    list-style-type:none; 
    font-size:0.9em; 
    width:20em; 
    color:#fff; 
    margin-left:-10px; 
} 

.sideMenu ul a{ 
    padding: 2px 20px 0px 0px; 
    color:#fff; 
    text-decoration:none; 
    float:left; 
    width:19.2em; 
} 

.sideMenu li a 
{ 
    height:2em; 
    padding-top: 1px; 
    padding-left:15px; 
} 

.sideMenu li a:hover{ 
    background:url(../images/point.png) no-repeat; 
    cursor:pointer; 
    padding-left:-15px; 
} 

.sideMenu h4{ 
    display:none; 
} 

/** Footer **/ 

#foot 
{ 
    padding-left: 20px; 
    padding-right: 20px; 
    position:absolute; 
    bottom:0; 
    height:60px; 
    height:1.5em; 
    font-size:.8em; 
} 

#foot li a 
{ 
    padding: 10px 0px 10px 0px; 
    color:#fff; 
    text-decoration:none; 
}

我失去了一些东西明显？感谢

来源

2012-02-10 Beginner

嗯...在HTML是有一个原因你没有一个body标签的任何地方？ – Hersha 2012-02-10 15:52:06

现场示例pls（jsfiddle） – cetver 2012-02-10 15:52:36

很难告诉你问什么，但如果你想要做的是禁用滚动页面，你首先需要添加一个<body>标签，并给它下面的样式属性：

<body style="overflow:hidden;"> 
    <!-- Page contents --> 
</body>

来源

2012-02-10 15:56:49

$('body').on('touchmove', function (event) { 
    event.preventDefault(); 
});

这可能工作

来源

2016-08-15 04:36:35 Martian2049

如何让页面停止垂直滚动？

回答

相关问题