首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >ScrollMagic取消伪选择器

ScrollMagic取消伪选择器
EN

Stack Overflow用户
提问于 2020-04-09 10:56:02
回答 1查看 92关注 0票数 0

我正在尝试使用ScrollMagic库来使用"Section“效果,并且我使用ScrollMagic为每一个div应用一种颜色,但是它似乎不适用于ScrollMagic。所有框都变成白色Html:

代码语言:javascript
运行
复制
    <div class="box" data="box-1"></div>
    <div class="box" data="box-2"></div>
    <div class="box" data="box-3"></div>
    <div class="box" data="box-4"></div>
    <div class="box" data="box-5"></div>

Css:

代码语言:javascript
运行
复制
.box {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;   
}

.box:nth-child(even) {
  background-color: #ccc;
}

Javascript:

代码语言:javascript
运行
复制
let boxes = document.querySelectorAll('.box');



let controller = new ScrollMagic.Controller({
    globalSceneOptions: {
        triggerHook: 'onLeave',
    }
});


for (let i = 0; i < boxes.length; i++) {
    new ScrollMagic.Scene({
        triggerElement: boxes[i]
    })
    .setPin(boxes[i], )
    .addTo(controller);
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-17 13:53:13

.box:nth-child(even)将无法工作,因为.box元素不再是兄弟姐妹,它们被.scrollmagic-pin-spacer包装

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61119535

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档