需要使用机车滚动在Scroll上更改页面颜色

问题描述

我需要更改此参考站点http://www.amandabraga.com/的页面颜色（即data-scroll-container） 在每个特定的数据滚动部分上滚动时

它工作正常，但是当我反向滚动时无法正常工作

HTML代码-

  <div class="container w-50"  data-scroll data-scroll-repeat='true' data-scroll-call="bg-red">
     ....
  </div>

Js代码-

scroll.on("call",callValue => {
if (callValue === "bg-blue") {
// currentScrollContainer.className="";
// currentScrollContainer.classList.add('bg-blue')
// gsap.set(currentScrollContainer,{background:'blueviolet'})
currentScrollContainer.style.background = "blueviolet"
}

解决方法

你需要给每个部分一个“id”，否则你仍然可以使用一个类。使用机车滚动事件触发器来检测该部分何时可见并为其指定颜色。

使用 jquery 进行演示。

const scroller = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),smooth: true
})

scroller.on('scroll',() => {
  sectionBgChange();
})


function sectionBgChange() {
  let firstSection = $('#yellow').offset().top;
  let secondSection = $('#blue').offset().top;
  let thirdSection = $('#red').offset().top;

  var scrollPos = $(document).scrollTop();
  if (scrollPos >= firstSection && scrollPos < secondSection) {
    $('#yellow').css('background-color','yellow');
  } else if (scrollPos >= secondSection && scrollPos < thirdSection) {
    $('#blue').css('background-color','blue');
  } else if (scrollPos >= thirdSection) {
    $('#red').css('background-color','red');
  } else {
    $('section').css('background-color','white');
  }
}

main {
  padding: 20px;
  background: #f2f2f2;
}

section {
  padding: 100px;
  margin: 10px 0;
  height: 50vh;
  z-index: 1;
  border: 1px solid #eaeaea;
  display: grid;
  place-content: center;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: bold;
  background-color: white;
  box-shadow: 0 2px 12px 0px rgba(0,0.25);
  position: relative;
  border-radius: .5rem;
}

section::before {
  content: attr(data-section);
}

<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main data-scroll-container>
  <section data-section="Yellow" data-scroll-section id="yellow"></section>
  <section data-section="Blue" data-scroll-section id="blue"></section>
  <section data-section="Red" data-scroll-section id="red"></section>
</main>

,

最后，我找到了一个更好的方法来实现这一目标

这里是代码，以防有人需要

HTML -

       <div class="vh-100">
            <span data-scroll data-scroll-repeat data-scroll-call="pageColor" 
             data-scroll-id="blue"> ____________blue  </span>
       </div>

       <div class="vh-100">
            <span data-scroll data-scroll-repeat data-scroll-call="pageColor" 
             data-scroll-id="green"> ____________green  </span>
       </div>

       <div class="vh-100">
            <span data-scroll data-scroll-repeat data-scroll-call="pageColor" 
             data-scroll-id="#ff0000"> ____________red  </span>
       </div>
        

CSS -（用于平滑过渡）

body{   
 transition: background-color 1s ease;
 }
 .vh-100{
   height:100vh;
  }

JS - (从 html 元素的 data-scroll-id 属性获取颜色代码或颜色名称并将其分配给正文背景颜色)

  setTimeout(() => {
    scroll.on('call',(value,way,obj) => {

      if (way === 'enter') {
        switch (value) {
          case "pageColor":
            // get color code from data-scroll-id  assigned to body by obj.id
               document.querySelector('body').style.backgroundColor = obj.id;
            break;      
       }
      }

    });
  },800);