html - 如何阻止网页滚动

标签 html css asp.net scroll

如何使我无法在登录页面上滚动？我已经在正文中设置了 margin: 0 但这不起作用......这非常难看，因为当你滚动时我的背景会重复自己并且我能够滚动是没有用的。预先感谢您的帮助。

Scrollbars

我的代码是这样的；

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    background: no-repeat;
    background-attachment: fixed;

}
body{
    background: #2C3E50;  
    background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    font-family: 'Fjalla One', sans-serif;
}


.container{
  width: 600px;
  height: 350px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
}
.backbox{
  background-color: #404040;
  width: 100%;
  height: 80%;
  position: absolute;
  transform: translate(0,-50%);
  top:50%;
  display: inline-flex;
  border-radius: 15px;
}

.frontbox{
  background-color: white;
  border-radius: 20px;
  height: 100%;
  width: 50%;
  z-index: 10;
  position: absolute;
  right:0;
  margin-right: 3%;
  margin-left: 3%;
  transition: right .8s ease-in-out;
}

.moving{
  right:45%;
}

.loginMsg, .signupMsg{
  width: 50%;
  height: 100%;
  font-size: 15px;
  box-sizing: border-box;
}

.loginMsg .title,
.signupMsg .title{
  font-weight: 300;
  font-size: 18px;
}

.loginMsg p,
.signupMsg p {
  font-weight: 100;
}

.textcontent{
  color:white;
  margin-top:65px;
  margin-left: 12%;
}

.loginMsg button,
.signupMsg button {
  background-color: deepskyblue;
  border: 2px solid white;
  border-radius: 10px;
  color:white;
  font-size: 12px;
  box-sizing: content-box;
  font-weight: 300;
  padding:10px;
  margin-top: 20px;
}

/* front box content*/
.login, .signup{
  padding: 20px;
  text-align: center;
}

.login h2,
.signup h2 {
  color: lightblue;
  font-size:22px;
}

.inputbox{
  margin-top:30px;
}
.login input,
.signup input {
  display: block;
  width: 100%;
  height: 40px;
  background-color: #f2f2f2;
  border: none;
  margin-bottom:20px;
  font-size: 12px;
}

.login button,
.signup button{
  background-color: deepskyblue;
  border: none;
  color:white;
  font-size: 12px;
  font-weight: 300;
  box-sizing: content-box;
  padding:10px;
  border-radius: 10px;
  width: 60px;
  position: absolute;
  right:30px;
  bottom: 30px;
  cursor: pointer;
}

/* Fade In & Out*/
.login p {
  cursor: pointer;
  color:#404040;
  font-size:15px;
}

.loginMsg, .signupMsg{
  /*opacity: 1;*/
  transition: opacity .8s ease-in-out;
}

.visibility{
  opacity: 0;
}

.hide{
  display: none;
}

#logintitel1 #logintitel2{
   background: -webkit-linear-gradient(#141deg, #2cb5e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Login</title>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <script src="jslogin.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
     <link href="stylelogin.css" rel="stylesheet" />

</head>

<body>
  
    <form id="form1" runat="server">
                
        
        <div align="center">
          <h1 style="text-transform: uppercase;font-size: 60px;letter-spacing: 2px;text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;text-align: center; margin-top: 60px;">
            <span style="transform: rotate(-5deg);margin: 0 auto;display: block;">
               <label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
            </span>
          </h1>
        </div>
       

              
<div class="container">
    <div class="backbox">
      <div class="loginMsg">
        <div class="textcontent">
          <p class="title">Heb je nog geen account?</p>
          <p>Registreer om toegang te krijgen<br /> tot de knowledge base</p>
          <button id="switch1">Registreer</button>
        </div>
      </div>
      <div class="signupMsg visibility">
        <div class="textcontent">
          <p class="title">Heb je al een account? </p>
          <p>Log in om toegang te krijgen <br />tot de knowledge base</p>
          <button id="switch2" onclick="">Log in</button>
        </div>
      </div>
    </div>
    <!-- backbox -->
    

    <div class="frontbox">
      <div class="login">
          <asp:Label ID="Label1" class="lbllgn" runat="server" ></asp:Label> 
        <h2 id="logintitel1">Log in</h2>
        <div class="inputbox">
          <input id="txtpcnummerlogin" type="text" name="email" placeholder="PC NUMMER" runat="server"/>
          <input id="txtwachtwoordlogin" type="password" name="password" placeholder="WACHTWOORD" runat="server"/>
        </div>
          
          <asp:Button ID="Button1" runat="server" Text="Log in" OnClick="Button1_Click" ForeColor="White" BackColor="DeepSkyBlue"/>
            
      </div>

      <div class="signup hide">
        <h2 id="logintitel2">Registreer</h2>
        <div class="inputbox">
          <input type="text" id="txtregistreernaam" placeholder="VOLLEDIGE NAAM" runat="server"/>
          <input type="text" id="txtpcnummerregistreer" placeholder="PC NUMMER" runat="server"/>
          <input type="password" id="txtwacthwoordregistreer" placeholder="WACHTWOORD" runat="server"/>
        </div>
          <asp:Button ID="Button2" runat="server" Text="Registreer" OnClick="Button2_Click" ForeColor="White" BackColor="DeepSkyBlue"/>
      </div>

    </div>
    <!-- frontbox -->
  </div>
    </form>

  
</body>
    <script src="jslogin.js"></script>

</html>

最佳答案

只需使用 overflow: auto; 隐藏两个滚动条，这样只有当 body 内部的东西离开页面时它们才会弹出，就像这样:

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    background: no-repeat;
    background-attachment: fixed;
    overflow:auto;
}
body{
    background: #2C3E50;  
    background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    font-family: 'Fjalla One', sans-serif;
}


.container{
  width: 600px;
  height: 350px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
}
.backbox{
  background-color: #404040;
  width: 100%;
  height: 80%;
  position: absolute;
  transform: translate(0,-50%);
  top:50%;
  display: inline-flex;
  border-radius: 15px;
}

.frontbox{
  background-color: white;
  border-radius: 20px;
  height: 100%;
  width: 50%;
  z-index: 10;
  position: absolute;
  right:0;
  margin-right: 3%;
  margin-left: 3%;
  transition: right .8s ease-in-out;
}

.moving{
  right:45%;
}

.loginMsg, .signupMsg{
  width: 50%;
  height: 100%;
  font-size: 15px;
  box-sizing: border-box;
}

.loginMsg .title,
.signupMsg .title{
  font-weight: 300;
  font-size: 18px;
}

.loginMsg p,
.signupMsg p {
  font-weight: 100;
}

.textcontent{
  color:white;
  margin-top:65px;
  margin-left: 12%;
}

.loginMsg button,
.signupMsg button {
  background-color: deepskyblue;
  border: 2px solid white;
  border-radius: 10px;
  color:white;
  font-size: 12px;
  box-sizing: content-box;
  font-weight: 300;
  padding:10px;
  margin-top: 20px;
}

/* front box content*/
.login, .signup{
  padding: 20px;
  text-align: center;
}

.login h2,
.signup h2 {
  color: lightblue;
  font-size:22px;
}

.inputbox{
  margin-top:30px;
}
.login input,
.signup input {
  display: block;
  width: 100%;
  height: 40px;
  background-color: #f2f2f2;
  border: none;
  margin-bottom:20px;
  font-size: 12px;
}

.login button,
.signup button{
  background-color: deepskyblue;
  border: none;
  color:white;
  font-size: 12px;
  font-weight: 300;
  box-sizing: content-box;
  padding:10px;
  border-radius: 10px;
  width: 60px;
  position: absolute;
  right:30px;
  bottom: 30px;
  cursor: pointer;
}

/* Fade In & Out*/
.login p {
  cursor: pointer;
  color:#404040;
  font-size:15px;
}

.loginMsg, .signupMsg{
  /*opacity: 1;*/
  transition: opacity .8s ease-in-out;
}

.visibility{
  opacity: 0;
}

.hide{
  display: none;
}

#logintitel1 #logintitel2{
   background: -webkit-linear-gradient(#141deg, #2cb5e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Login</title>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <script src="jslogin.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
     <link href="stylelogin.css" rel="stylesheet" />

</head>

<body>
  
    <form id="form1" runat="server">
                
        
        <div align="center">
          <h1 style="text-transform: uppercase;font-size: 60px;letter-spacing: 2px;text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;text-align: center; margin-top: 60px;">
            <span style="transform: rotate(-5deg);margin: 0 auto;display: block;">
               <label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
            </span>
          </h1>
        </div>
       

              
<div class="container">
    <div class="backbox">
      <div class="loginMsg">
        <div class="textcontent">
          <p class="title">Heb je nog geen account?</p>
          <p>Registreer om toegang te krijgen<br /> tot de knowledge base</p>
          <button id="switch1">Registreer</button>
        </div>
      </div>
      <div class="signupMsg visibility">
        <div class="textcontent">
          <p class="title">Heb je al een account? </p>
          <p>Log in om toegang te krijgen <br />tot de knowledge base</p>
          <button id="switch2" onclick="">Log in</button>
        </div>
      </div>
    </div>
    <!-- backbox -->
    

    <div class="frontbox">
      <div class="login">
          <asp:Label ID="Label1" class="lbllgn" runat="server" ></asp:Label> 
        <h2 id="logintitel1">Log in</h2>
        <div class="inputbox">
          <input id="txtpcnummerlogin" type="text" name="email" placeholder="PC NUMMER" runat="server"/>
          <input id="txtwachtwoordlogin" type="password" name="password" placeholder="WACHTWOORD" runat="server"/>
        </div>
          
          <asp:Button ID="Button1" runat="server" Text="Log in" OnClick="Button1_Click" ForeColor="White" BackColor="DeepSkyBlue"/>
            
      </div>

      <div class="signup hide">
        <h2 id="logintitel2">Registreer</h2>
        <div class="inputbox">
          <input type="text" id="txtregistreernaam" placeholder="VOLLEDIGE NAAM" runat="server"/>
          <input type="text" id="txtpcnummerregistreer" placeholder="PC NUMMER" runat="server"/>
          <input type="password" id="txtwacthwoordregistreer" placeholder="WACHTWOORD" runat="server"/>
        </div>
          <asp:Button ID="Button2" runat="server" Text="Registreer" OnClick="Button2_Click" ForeColor="White" BackColor="DeepSkyBlue"/>
      </div>

    </div>
    <!-- frontbox -->
  </div>
    </form>

  
</body>
    <script src="jslogin.js"></script>

</html>

附言: 您还可以使用 overflow-y: auto; 或 overflow-x: auto;

仅隐藏垂直/​​水平滚动

如果你想隐藏滚动条，即使有东西离开视野，你可以使用属性hidden而不是auto，所以它们永远不会弹出向上

关于html - 如何阻止网页滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43653629/

上一篇：jquery - 无法使此语句起作用

下一篇：CSS ol - 如何将我的 css 边框放在增量列表的数字和文本之间？

相关文章：

c# - 如何在 ASP.net 5 中使用 Controller 之外的 session ？

c# - 关于 ASP.Net 中的弹出窗口

javascript - 如何在同一个 HTML 页面中离线绘制所有 Plotly 图表？

css - 父 div 没有扩展到 child 的高度

html - 背景图像在 IE6 中不居中

html css 对齐文本，使文本始终位于图像的右侧而不是图像下方

java - 任何 Javascript 都会阻止我的程序抓取此页面

css - 如何简化这个 SASS 语句？

javascript - 是否可以禁用外部元素的滚动并保持内部元素的滚动？

mysql - 使用 MySQL，具有固定名称 'MySql.Data.MySqlClient' 的 ADO.NET 提供程序未在计算机或应用程序配置文件中注册

©2024 IT工具网  联系我们