当 div 使用 CSS scroll-snap 进入视口时在滚动上切换类

编程问答 2022-05-24

问题描述

我有一个垂直幻灯片，当用户滚动时它会滚动/粘到下一个面板。所需的效果是 https://www.tesla.com，但我认为我可以用 CSS 实现这一点（下面的示例）。

示例 1： https://codepen.io/moy/pen/poNrVdO

问题是我想添加一个类，以便在下一个面板变为“活动”时淡入文本，但我不确定最好的方法是什么。由于要使用的框架，非 jQuery 解决方案会更可取。我尝试使用 http://dbrekalo.github.io/whenInViewport/，但现在无法使用它来打球。

import * as whenInViewport from "https://cdn.skypack.dev/when-in-viewport@2.0.4";

var WhenInViewport = window.WhenInViewport;
var elements = Array.prototype.slice.call(
 document.getElementsByClassName("slideshow__panel")
);

elements.forEach(function (element) {
  new WhenInViewport(element,function (elementInViewport) {
    elementInViewport.classList.add("inViewport");
  });
});

更新

当项目进入/离开视口时，我尝试使用的 JS 只会添加一个类，而不是切换（添加/删除）。所以我决定尝试一些其他的选择。我以前使用过 AOS（滚动动画），但这也有问题...

示例 2： https://codepen.io/moy/pen/XWNavaO

我认为这是对 overflow-y: auto 进行的，它是使 snap-scroll 工作所需的。任何人都可以就此提供建议，还是我会更好地远离快速滚动 - 因为它比它的价值更麻烦？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

aos.jshtmljavascriptscrollscrollscrollviewport