如何添加CSS属性时，网页向下滚动?

Question

我是一个编程初学者，我遇到过很多困难~

我有一个网页元素，我希望在页面向下滚动时添加一个绿色块

.content{
background-color: #ccc;
}
.wrap{
max-width:600px;
margin:auto;
}
.demo{
background-color: #71ff05;
height: 100px;
text-align:center;
line-height: 100px;
font-size: 20px;
/*   position:fixed;
top:0px;
right:0px;
left:0px; */
}
p{
background-color: yellow;
line-height:2;
padding:20px;
}

<div class="content">
<div class="wrap">
<div class="demo">title</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam laudantium, vel doloremque eveniet quam repudiandae porro dolor voluptas labore inventore voluptate mollitia ipsam ab tempore delectus libero. At autem distinctio amet enim obcaecati iusto consectetur minima dolore in similique suscipit, saepe fugiat nulla error aperiam, eos earum. Hic, sapiente assumenda officiis rem, aliquam non deleniti nemo nesciunt, accusantium nisi quam adipisci blanditiis eaque. Earum dolorum veniam dicta sunt hic quisquam ex esse, ratione architecto? Quae nemo modi nostrum asperiores, quibusdam quidem suscipit, sapiente architecto doloremque, iure magnam expedita nesciunt. Beatae optio illum eaque! Quibusdam magnam, quaerat quos at recusandae commodi ullam tenetur dolore nam, porro ex repellat aut autem architecto iste veritatis dolor nostrum exercitationem quia inventore perferendis necessitatibus facilis. Consequuntur atque facilis repudiandae optio consequatur fuga culpa est pariatur earum nisi. Unde blanditiis exercitationem fuga praesentium corrupti. Voluptatibus, earum sed doloremque illum nam, perferendis nihil a laudantium labore atque beatae hic quod aspernatur quasi, iste exercitationem. Excepturi molestias dolore dolorem sapiente officiis dolorum animi nihil inventore maxime eaque. Repudiandae cumque ducimus, suscipit eligendi quisquam ipsum. In excepturi eligendi recusandae commodi? Ducimus voluptas, nesciunt reiciendis eum quasi, molestias eius deleniti facere neque amet enim, porro autem illum! Exercitationem dolore qui cum aliquid fugiat. Aut alias fugiat fugit provident quas similique eaque officia sed quam, praesentium ut minus atque, velit dolor quidem facilis quo dolorem veniam repellendus magnam culpa adipisci obcaecati quasi excepturi. Temporibus, harum quam. Ducimus tenetur sequi, iusto quas officia recusandae? Hic ipsa temporibus aliquid ratione ullam delectus adipisci a sequi inventore laboriosam architecto alias quam voluptate mollitia facilis possimus, ducimus illo repellat magni reiciendis eius. Facilis tenetur distinctio quaerat dolore recusandae doloribus voluptate dolores sint cupiditate amet praesentium consequatur voluptatum quas, repudiandae facere? Enim fugiat quia inventore labore. Labore non aliquam necessitatibus laborum? Iusto reiciendis perferendis sunt distinctio!</p>
</div>
</div>

当页面滚动到顶部时，你可以取消这个CSS设置，但由于我不熟悉javascript，我不知道如何实现它。

我不知道是否有人能给我一点帮助，谢谢。

Answer 1

在这种情况下使用JavaScript不是必须的，一些css也可以工作

.wrap{
scroll-snap-type:y mandatory;
overflow-y:scroll;
height: 100vh
}
p{
height: 100vh;
scroll-snap-align:start;
}

和在html中，将整个lorem ipsum文本分成三个或更多的<p>标签，并为每个<p>提供不同的id名称，例如

<p id="one">~</p>
<p id="two">~</p>
<p id="three">~</p>

和css文件:

.one{
background:#ccc;
}
.two{
background:#fff;
}
.three{
background:#AAA;
}