Question

我目前正在开发彩票应用程序，并且已经为其编写了UI。问题是我的页面目前无法滚动。

可能是因为我添加了渐变背景。

我已经搜索了几种解决方案，但是没有一个起作用：

的链接

我的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;
}

Answer 1

您的问题是因为您在容器上添加了position: fixed;。我会将您的背景作为background-image元素应用于CSS中的<body>标签。

Answer 2

从position:fixed样式中删除.container，然后删除.container::before样式，并将background设置为.container样式。同时从身体样式中删除overflow:scroll。

html, body {
    font-family: 'Ubuntu', sans-serif;
}


.container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  
    background: radial-gradient(ellipse at bottom right, #aef78e, #77BA99,#aef78e);
    background-size: 400% 400%;
    animation: ambient 25s ease-in-out infinite;
}
@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;
}
.lottery-number ~ .focus-border:before,
.lottery-number ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #4caf50; transition: 0.3s;}
.lottery-number ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
.lottery-number ~ .focus-border i:before,
.lottery-number ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 0; background-color: #4caf50; transition: 0.4s;}
.lottery-number ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
.lottery-number:focus ~ .focus-border:before,
.lottery-number:focus ~ .focus-border:after{width: 100%; transition: 0.4s;}
.lottery-number:focus ~ .focus-border i:before,
.lottery-number:focus ~ .focus-border i:after{height: 100%; transition: 0.5s;}

.draw-number {
    border: 1px solid #ccc; 
    padding: 7px 14px 9px; 
    transition: 0.4s;
}
.draw-number ~ .focus-border:before,
.draw-number~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #4caf50; transition: 0.3s;}
.draw-number ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
.draw-number ~ .focus-border i:before,
.draw-number ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #4caf50; transition: 0.4s;}
.draw-number ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
.draw-number:focus ~ .focus-border:before,
.draw-number:focus ~ .focus-border:after{width: 100%; transition: 0.3s;}
.draw-number:focus ~ .focus-border i:before,
.draw-number:focus ~ .focus-border i:after{height: 100%; transition: 0.4s;}

/* Button styles */

#button-send_results {
    border: none;
    background: #e0f008;
    color: #000000 !important;
    font-weight: 700;
    padding: 20px;
    text-transform: uppercase;
    border-radius: 6px;
    display: inline-block;
    width: 200px;
}

#button-send_results:hover {
    cursor: pointer;
    color: #fdfdfd !important;
    letter-spacing: 3px;
    background: rgb(11, 56, 33);
    -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    transition: all 0.3s ease 0s;
}

<!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>

您也可以here对其进行测试

Answer 3

这是您的position: fixed;属性。

Answer 4

这是因为CSS中第11行的position: fixed;。只需将其删除即可。

页面效果不错，但无法滚动

4 个答案: