網頁向下滾動時如何添加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;
           }