我正在使用 Locomotive Scroll 来获得平滑的滚动效果。
到达某个部分时，我需要更改整个 HTML 的背景颜色和颜色。目前我正在使用机车上的调用事件来添加一个名为“updateBg”的自定义函数，当它被调用时，我会更改包装器的背景和颜色。
棘手的部分是，如果该部分仍在视口中并且我反转滚动它不会改变颜色。
示例：如果我滚动到第二个介绍部分（并且第一个介绍在视口中），它将变为黑色背景。但是，如果我向上滚动，它不会变为白色背景，因为该部分没有从视口中出来，并且最后一次调用是黑色背景。
您必须完全通过一个部分才能反转颜色。
const initLocomotiveScroll = () => {
const wrapper = document.querySelector('.wrapper')
const locoScroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
})
locoScroll.on('call', (func, dir, obj) => {
const {
el
} = obj
if ('updateBg' === func) {
const bg = el.getAttribute('data-bg')
const color = el.getAttribute('data-color')
if (dir === 'enter') {
wrapper.style.backgroundColor = bg
wrapper.style.color = color
}
}
})
}
setTimeout(() => {
initLocomotiveScroll()
}, 1000);/* ------------------------------------------------------------ *\
Base
\* ------------------------------------------------------------ */
html {
background: #fff;
font-size: 16px;
font-weight: 500;
line-height: 1.4;
color: #000;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 1rem;
}
h1 {
margin-bottom: 20px;
font-size: 50px;
font-weight: 800;
line-height: 1.44;
}
h2 {
font-size: 36px;
line-height: 1.1667;
}
h3 {
font-size: 24px;
font-weight: 800;
}
h4 {
font-size: 18px;
font-weight: 600;
}
h5 {
margin-bottom: 10px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
}
h6 {
font-size: 14px;
}
p {
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
}
.text-large {
font-size: 24px;
line-height: 1.7;
}
/* ------------------------------------------------------------ *\
Wrapper
\* ------------------------------------------------------------ */
.wrapper {
overflow: hidden;
min-height: 100vh;
padding-top: 90px;
background: #fff;
color: #000;
backface-visibility: hidden;
transition: background-color .4s ease-in, color .4s ease-in;
will-change: background-color, color;
}
/* ------------------------------------------------------------ *\
Container
\* ------------------------------------------------------------ */
.container {
width: 100%;
max-width: 1156px;
padding: 0 60px;
margin: 0 auto;
}
/* ------------------------------------------------------------ *\
Fullsize Image
\* ------------------------------------------------------------ */
.fullsize-image {
position: relative;
display: block;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
&>img {
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 1px;
opacity: 0;
}
}
/* ------------------------------------------------------------ *\
Intro
\* ------------------------------------------------------------ */
.intro {
position: relative;
padding: 105px 0;
&__content {
max-width: 800px;
}
&__entry {
max-width: 520px;
margin-bottom: 15px;
}
}
/* ------------------------------------------------------------ *\
Section Gutter
\* ------------------------------------------------------------ */
.section-gutter {
padding: 50px 0;
}<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<div class="wrapper" data-scroll-container>
<main class="main">
<div data-scroll-section>
<section class="intro" data-scroll data-bg="#ffffff" data-color="#000000" data-scroll-repeat="true" data-scroll-call="updateBg">
<div class="container">
<div class="intro__content">
<h5 class="intro__subtitle">
<span>Lorem ipsum dolor.</span>
</h5>
<h2 class="intro__title">If I scroll to the second intro section (AND the first intro is in the viewport) it will change to a black background. But if I scroll up it will not change to a white background as the section did not get out from the viewport and the last
call was with a black background.</h2>
<p>You have to completely pass through a section to be able to reverse back the colors.</p>
</div>
</div>
</section>
</div>
<div data-scroll-section>
<div class="section-gutter">
<div class="container">
<h1>This is section just for gutters</h1>
</div>
</div>
</div>
<div data-scroll-section>
<section class="intro" data-scroll data-bg="#000000" data-color="#ffffff" data-scroll-repeat="true" data-scroll-call="updateBg">
<div class="container">
<div class="intro__content">
<h5 class="intro__subtitle">
<span>Lorem ipsum dolor.</span>
</h5>
<h1 class="intro__title">There is some kind of bug for changing the colors of the next sections, but they are not part of the main problem. On real project, it is working correctly.</h1>
</div>
</div>
</section>
</div>
<div data-scroll-section>
<div class="section-gutter">
<div class="container">
<h1>This is section just for gutters</h1>
</div>
</div>
</div>
<div data-scroll-section>
<section class="intro" data-scroll data-bg="#ffffff" data-color="#000000" data-scroll-repeat="true" data-scroll-call="updateBg">
<div class="container">
<div class="intro__content">
<h5 class="intro__subtitle">
<span>Lorem ipsum dolor.</span>
</h5>
<h1 class="intro__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, asperiores?</h1>
</div>
</div>
</section>
</div>
<div data-scroll-section>
<div class="section-gutter">
<div class="container">
<h1>This is section just for gutters</h1>
</div>
</div>
</div>
<div data-scroll-section>
<section class="intro" data-scroll data-bg="#000000" data-color="#ffffff" data-scroll-repeat="true" data-scroll-call="updateBg">
<div class="container">
<div class="intro__content">
<h5 class="intro__subtitle">
<span>Lorem ipsum dolor.</span>
</h5>
<h1 class="intro__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, asperiores?</h1>
</div>
</div>
</section>
</div>
</main>
</div>我认为唯一可行的方法是找到部分偏移顶部并根据部分的偏移顶部和机车的滚动增量设置颜色。问题是我唯一可以使用它们的偏移量是触发调用事件时。
我怎样才能使所有部分在负载上偏移顶部？有人可以想出另一种解决方法吗？