如何解决当 div 使用 CSS scroll-snap 进入视口时在滚动上切换类
我有一个垂直幻灯片,当用户滚动时它会滚动/粘到下一个面板。所需的效果是 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 举报,一经查实,本站将立刻删除。