0
如何使我不能在我的登录页面上滚动？我已经在body中设置了margin：0，但这不起作用......这很丑陋，因为当我滚动时我的背景会重复，而且我无法滚动。预先感谢您的帮助。如何在网页上阻止滚动
我的代码看起来是这样的;
@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>