Javascript 禁止文本滚动
我正在制作一个面向幻灯片的网站，类似于视差网站的运行方式，但到目前为止没有js，只有css，显然没有延迟滚动，因为到目前为止没有js 我正在制作前两张幻灯片。在第一张幻灯片中，我的标题和导航位于顶部，这是一个空白部分，用于css的效果，使用渐变和透明度，以及覆盖视口的图片 在第二张幻灯片上，我有一个部分表示所有幻灯片2，其中包含一个覆盖视口的不同图片，以及一些由自己的div标识并具有背景色和文本的文本 问题出在这里。通过使用背景附件和背景位置，我能够使背景颜色保持固定：屏幕左上角，高度：100%；宽度：15%；这样可以防止背景滚动，但对文本没有任何作用 我还需要禁止文本滚动，这样它在背景上的位置就不会改变。因此，与文本滚动到背景上不同，它更像是一道升起的帷幕，揭示了下面的文本 我尝试过position:fixed，但这会破坏幻灯片1上空白部分的透明度效果，并且出于某种原因，会忽略我给出的任何z索引，并保留在任何后续幻灯片的顶部（奇怪的是，它遵循构成幻灯片1的页眉、空白部分和img的z索引） 我可以用css做这个吗？我还不知道js，但我正在学习它，我知道它经常用于滚动效果。因此，如果唯一的解决方案是js，我并不反对使用它，我只是不理解它 以下是简化代码： HTML5Javascript 禁止文本滚动,javascript,css,text,position,scroll,Javascript,Css,Text,Position,Scroll,我正在制作一个面向幻灯片的网站，类似于视差网站的运行方式，但到目前为止没有js，只有css，显然没有延迟滚动，因为到目前为止没有js 我正在制作前两张幻灯片。在第一张幻灯片中，我的标题和导航位于顶部，这是一个空白部分，用于css的效果，使用渐变和透明度，以及覆盖视口的图片 在第二张幻灯片上，我有一个部分表示所有幻灯片2，其中包含一个覆盖视口的不同图片，以及一些由自己的div标识并具有背景色和文本的文本 问题出在这里。通过使用背景附件和背景位置，我能够使背景颜色保持固定：屏幕左上角，高度：100%
好吧，也许没那么简略。很抱歉如何让幻灯片2上的文字保留在背景附件上？滚动时固定幻灯片2的部分，而不破坏幻灯片1上的透明度效果，并允许幻灯片3滚动到幻灯片2上方？因此我自己解决了这个问题。有趣的是，答案是多么简单。我所做的只是在“slide2Text”容器中创建第二个容器，其中包含相同的内联文本元素，我将其标识为“text”，并使用css设置“slide2Text”的背景样式，使用css固定“text”的文本位置 我不确定我是否像我想的那样喜欢这个结果，但也许我可以使用一些javascript或css，在幻灯片滚动到视图时，使文本从不可见转换为可见 如果有人想看代码或者不明白我的答案，只要问一下，我就会贴出来。同样，这是一个简单的修复
<html>
<head>
</head>
<body>
<div id="headerContainer">
<div id="containerRow">
<header id="home">
<a href="#home" title="Top"><img id="logo" src="images/logo/MASKAUTONOMY.png" alt="Logo" style="height:75px; margin:25px 0px 0px 25px; padding:0;"></a>
</header>
<nav>
<ul>
<li>
<a href="#home" title="Home">HOME</a>
</li>
<li>
<a href="#about" title="More Links">ABOUT</a>
</li>
<li>
</ul>
</nav>
</div><!--End containerRow-->
</div><!--End table headerContainer-->
<section class="ribbon">
</section><!--Section left blank to make ribbon with gradient affect-->
<Section class="slide1">
<h1>Company Slogan</h1>
</section>
<section id="about" class="slide2">
<div id="slide2Text">
<h1><span>Mask</span> Autonomy</h1>
<p class="companyInfo">Some stuff
</p>
<p> some more stuff.
</p>
</div><!--End of slide2Text-->
</section>
<section id="services" class="slide3">
<ul>
<li>List of things we do
</li>
<li>More things we do
</li>
</ul>
</section><!--End of slide3-->
</body>
</html>
body {
padding: 0px;
}
#headerContainer {
height: 10vh;
width: 100%;
margin: 0px;
padding: 0px;
display: table;
position: relative;
z-index: 999;
background-color: #e1e3e9;
}
header {
display: table-cell;
}
nav {
margin: 0px;
padding: 0px;
display: table-cell;
width: 100%;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
nav ul li {
margin-right: 0px;
padding-right: 25px;
display: inline-block;
*display: inline;
*zoom: 1;
font-size: 1.2vw;
font-family: arial;
}
nav ul li:last-of-type {
margin-right: 47px;
padding: 0px;
}
.ribbon {
position: relative;
height: 4vh;
width: 100%;
background-color: #e1e3e9;
z-index: 998;
}
.slide1 {
color: #e0e0e0;
height: 86vh;
background-image: url(../../Documents/DOCS/Stycorp/Website/Images/bckgrnd.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
overflow-x: hidden;
margin-bottom: 0px;
padding: 0px;
position: relative;
z-index: 997;
}
.slide1 h1 {
position: relative;
top: 60%;
left: 47px;
font-size: 4vh;
}
.slide2 {
position: relative;
height: 100vh;
background: url(images/Charlotte.jpg) no-repeat center center fixed;
background-size: cover;
z-index: 989;
}
#slide2Text {
position: static;
background-color: #7d8e9e;
background-attachment: fixed;
background-position: left top;
height: 100%;
width: 15%;
text-align: center;
font-size: 2.33vh;
}
#slide2Text h1 {
position: relative;
top: 2.5%;
font-weight: normal;
text-transform: uppercase;
}
#slide2Text span {
color: #a9aba5;
font-weight: normal;
text-transform: uppercase;
}
.companyInfo {
color: #e0e0e0;
}
.slide3 {
position: relative;
z-index: 994;
height: 100vh;
}