如何一次滚动整个网页和内容

我有一个div，它有一个透明的黑色，所以实际的背景颜色仍然显示，但变暗了。在这个div中，我有一个带文本的div。

因此，当将文本添加到我的div时，我意识到它有2"；可滚动的"；部分，一个用于包含内容的div，另一个用于宽度为100%的背景div。

最终的结果应该只是一个滚动，通过页面的高度到达页脚。相反，现在我必须在内容div中滚动以查看所有文本，只有当我将鼠标放在两侧的背景div上时，我才能到达页面的末尾。

这是代码：

也许我使用了错误的元素，或者有另一种方法可以达到我想要达到的效果。

*
{
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', monospace;
}
body
{
/*background: linear-gradient(-45deg, #ff933b, #e73c7e, #27e1ee, #20f3c2);*/
background: linear-gradient(-45deg, #ffe1c8, #ffebf3, #e6ebeb, #eeebd5);
background-size: 400% 400%;
animation: gradient 20s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
header
{
z-index: 10;
backface-visibility: hidden;
background: inherit;
transition: 0.4s;
position: sticky;
top: 0;
left: 0;
width: 100%;
padding: 1%;
display: flex;
gap: 5%;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.637);
}
header .logo
{
position: absolute;
left: 5%;
transition: all 0.2s;
max-height: 65px;
}
header .topper
{
transition: ease-in;
transition-duration: 0.4s;
color: black;
text-decoration: none;
text-transform: uppercase;
padding-left: 17%;
letter-spacing: 1%;
font-size: 50px;
}
header ul
{
position: absolute;
display: flex;
gap: 5%;
list-style: none;
}
header ul li
{
padding-left: 4%;
}
header ul li a
{
transition: ease-in;
text-decoration: none;
color: black;
font-size: 20px;
letter-spacing: 2%;
}
header ul li label
{
transition: ease-in;
font-size: 30px;
margin-left: 100%;
}
header ul li a:hover
{
color: rgb(255, 255, 255);
font-weight: 300;
border: 2px rgba(255, 255, 255, 0.459);
text-shadow: 2px 2px 3px rgb(0, 0, 0);
transition: ease-in;
font-weight: 200;
transition-duration: 0.4s;
}
header ul li label:hover
{
color: rgb(255, 255, 255);
font-weight: 300;
border: 2px rgba(255, 255, 255, 0.459);
text-shadow: 2px 2px 3px rgb(0, 0, 0);
transition: ease-in;
font-weight: 200;
transition-duration: 0.4s;
}   
header .topper:hover
{
color: rgb(255, 255, 255);
transition: ease-in;
transition-duration: 0.4s;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.466);
}
div ::-webkit-scrollbar {
display: none;
}
div ::selection {
background: rgba(255, 207, 144, 0.822);
color: black;
}
div .main
{
position: sticky;
color: white;
overflow: auto;
height: 100vh;
z-index: 0;
width: 100%;
background: rgba(0, 0, 0, 0.712);
padding-left: 13.7%;
padding-right: 13.7%;
}
div.content
{
color: white;
overflow: auto;
height: 100vh;
z-index: 1;
padding-left: 5%;
padding-right: 4%;
background: rgba(0, 0, 0, 0.384);;
}
div.content p
{   
margin-top: 16px;
}
div.content h1
{   
margin-top: 30px;
}
footer
{
z-index: 1;
backface-visibility: hidden;
background: inherit;
width: 100%;
padding: 25px 10%;
box-shadow: -3px -2px 9px rgba(0, 0, 0, 0.637);
}
footer div.footer
{
flex-direction: column;
display: flex;
list-style: none;;
}

<!DOCTYPE html>
<html>
<head>
<title>Lorem ipsum</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
<script src="Script.js" defer></script>
<link rel="stylesheet" href="Style.css" media="screen" type="text/css">
</head>
<body>
<header id="header">
<img src="images/MainLogo/logo.png" class="logo" id="mainLogo"></img>
<a href="#" class="topper" id="MainTextIcon">Lorem ipsum</a>
<ul id="ul">
<li><a href="#" class="webHeader" id="webHeader">Home</a></li>
<li><a href="#" class="webHeader" id="webHeader">About</a></li>
<li><a href="#" class="webHeader" id="webHeader">Work</a></li>
<li><a href="#" class="webHeader" id="webHeader">Contact</a></li>
<li><label class="mobileButton" for="hamburger" id="burguerButton">&#9776;</label></li>
</ul>   
</header>
<div>
<div class="main" id="mainContainer">    
<div class="content" id="contentContainer">
<h1>Lorem ipsum</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque. 
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar. 
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget. 
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque. 
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar. 
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget. 
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque. 
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar. 
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget. 
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.  
</p>
</div>    
</div>
</div>
</body>
<footer>
</footer>
</html>

滚动部分是使用CSS中的overflow:auto创建的。如果你删除这些，你会得到整个页面的一个滚动条。但是，您还将遇到其他需要修复的div重叠问题。

*
{
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', monospace;
}
body
{
/*background: linear-gradient(-45deg, #ff933b, #e73c7e, #27e1ee, #20f3c2);*/
background: linear-gradient(-45deg, #ffe1c8, #ffebf3, #e6ebeb, #eeebd5);
background-size: 400% 400%;
animation: gradient 20s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
header
{
z-index: 10;
backface-visibility: hidden;
background: inherit;
transition: 0.4s;
position: sticky;
top: 0;
left: 0;
width: 100%;
padding: 1%;
display: flex;
gap: 5%;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.637);
}
header .logo
{
position: absolute;
left: 5%;
transition: all 0.2s;
max-height: 65px;
}
header .topper
{
transition: ease-in;
transition-duration: 0.4s;
color: black;
text-decoration: none;
text-transform: uppercase;
padding-left: 17%;
letter-spacing: 1%;
font-size: 50px;
}
header ul
{
position: absolute;
display: flex;
gap: 5%;
list-style: none;
}
header ul li
{
padding-left: 4%;
}
header ul li a
{
transition: ease-in;
text-decoration: none;
color: black;
font-size: 20px;
letter-spacing: 2%;
}
header ul li label
{
transition: ease-in;
font-size: 30px;
margin-left: 100%;
}
header ul li a:hover
{
color: rgb(255, 255, 255);
font-weight: 300;
border: 2px rgba(255, 255, 255, 0.459);
text-shadow: 2px 2px 3px rgb(0, 0, 0);
transition: ease-in;
font-weight: 200;
transition-duration: 0.4s;
}
header ul li label:hover
{
color: rgb(255, 255, 255);
font-weight: 300;
border: 2px rgba(255, 255, 255, 0.459);
text-shadow: 2px 2px 3px rgb(0, 0, 0);
transition: ease-in;
font-weight: 200;
transition-duration: 0.4s;
}   
header .topper:hover
{
color: rgb(255, 255, 255);
transition: ease-in;
transition-duration: 0.4s;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.466);
}
div ::-webkit-scrollbar {
display: none;
}
div ::selection {
background: rgba(255, 207, 144, 0.822);
color: black;
}
div .main
{
position: sticky;
color: white;
height: 100vh;
z-index: 0;
width: 100%;
background: rgba(0, 0, 0, 0.712);
padding-left: 13.7%;
padding-right: 13.7%;
}
div.content
{
color: white;
height: 100vh;
z-index: 1;
padding-left: 5%;
padding-right: 4%;
background: rgba(0, 0, 0, 0.384);;
}
div.content p
{   
margin-top: 16px;
}
div.content h1
{   
margin-top: 30px;
}
footer
{
z-index: 1;
backface-visibility: hidden;
background: inherit;
width: 100%;
padding: 25px 10%;
box-shadow: -3px -2px 9px rgba(0, 0, 0, 0.637);
}
footer div.footer
{
flex-direction: column;
display: flex;
list-style: none;;
}

<!DOCTYPE html>
<html>
<head>
<title>Lorem ipsum</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
<script src="Script.js" defer></script>
<link rel="stylesheet" href="Style.css" media="screen" type="text/css">
</head>
<body>
<header id="header">
<img src="images/MainLogo/logo.png" class="logo" id="mainLogo"></img>
<a href="#" class="topper" id="MainTextIcon">Lorem ipsum</a>
<ul id="ul">
<li><a href="#" class="webHeader" id="webHeader">Home</a></li>
<li><a href="#" class="webHeader" id="webHeader">About</a></li>
<li><a href="#" class="webHeader" id="webHeader">Work</a></li>
<li><a href="#" class="webHeader" id="webHeader">Contact</a></li>
<li><label class="mobileButton" for="hamburger" id="burguerButton">&#9776;</label></li>
</ul>   
</header>
<div>
<div class="main" id="mainContainer">    
<div class="content" id="contentContainer">
<h1>Lorem ipsum</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque. 
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar. 
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget. 
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque. 
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar. 
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget. 
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque. 
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar. 
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget. 
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.  
</p>
</div>    
</div>
</div>
</body>
<footer>
</footer>
</html>

您应该删除

高度：100vh；

来自div.main和div.contentCSS选择器。因为定义div的高度是滚动条出现的原因。

这是CodeSandBox链接。https://codesandbox.io/s/frosty-bogdan-m22tdj?file=/Style.css

相关内容

最新更新

热门标签：