【发布时间】：2019-03-22 22:36:46
【问题描述】：
我目前正在开发一个彩票应用程序，并为它编写了 UI 代码。 问题是我的页面现在无法滚动。
这可能是因为我添加了渐变背景。
我已经搜索了几种解决方案，但都没有奏效：
这是CodePen的链接
我的 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lottery app</title>
<link rel="stylesheet" href="src/style.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<main class="container">
<section class="lottery-page">
<h1 class="main-header">WELCOME TO THE LOTTERY!</h1>
<h2 class="action-header">Please, enter your winnings numbers here (from 0 to 52):</h2>
<div class="user-input">
<div class="number-wrapper">
<label for="user-number_1">1st number</label>
<input id="user-number_1" class="lottery-number" type="number" maxlength="2">
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-number_1">2nd number</label>
<input id="user-number_2" class="lottery-number" type="number" maxlength="2">
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-number_1">3rd number</label>
<input id="user-number_3" class="lottery-number" type="number" maxlength="2">
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-number_1">4th number</label>
<input id="user-number_4" class="lottery-number" type="number" maxlength="2">
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-number_1">5th number</label>
<input id="user-number_5" class="lottery-number" type="number" maxlength="2">
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-number_1">6th number</label>
<input id="user-number_6" class="lottery-number" type="number" maxlength="2">
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-draw">Number of draws</label>
<input id="user-draw" class="draw-number" type="number" maxlength="6">
<span class="focus-border">
<i></i>
</span>
</div>
</div>
<div class="submit-button">
<button id="button-send_results" type = "submit">Let's win!</button>
</div>
<div class="user-results">
</div>
</section>
</main>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="src/index.js"></script>
</body>
</html>
style.css
html, body {
font-family: 'Ubuntu', sans-serif;
overflow-y: scroll;
}
.container {
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: flex-start;
justify-content: center;
}
.container::before {
content: "";
position: absolute;
background: radial-gradient(ellipse at bottom right, #aef78e, #77BA99,#aef78e);
background-size: 400% 400%;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
animation: ambient 25s ease-in-out infinite;
z-index: -1;
}
@keyframes ambient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.lottery-page {
width: 80%;
border: 3px solid black;
border-style : inset;
margin-top: 50px;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.main-header {
padding: 0px, 50px, 50px, 50px;
}
.lottery-number, .lottery-number_label, .draw-number{
width: 100px;
height: 50px;
}
.user-input {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 100px, 0px;
padding: 100px, 0px;
}
.action-header {
margin-bottom: 70px;
}
label, input {
display: block;
text-align: center;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
font: 15px/24px 'Muli', sans-serif;
color: #333;
width: 150px;
box-sizing: border-box;
letter-spacing: 1px;
margin: 30px;
}
.number-wrapper {
position: relative;
}
/* Input animation */
.lottery-number {
border: 3px solid #ccc;
padding: 7px 14px 9px;
transition: 0.4s;
}
【问题讨论】：
-
您在容器上使用
position:fixed并将渐变应用到该容器而不是<body>的任何原因？