css - 让 Div 仅在页面滚动时出现

Question

我知道这个问题有点模糊，但我更想知道我所问的是否可能。我知道当用户点击网页上的特定点时触发事件相当容易，但我想知道是否可以仅显示 div 或者仅在页面主动滚动时应用一个类，然后取消应用一旦滚动停止，这一切都会发生。

一个例子是在页面顶部有一个固定的 div，它是蓝色的，但仅在没有发生滚动时才显示。当滚动发生时，div 会变成红色，然后一旦用户再次停止滚动，它就会变回蓝色。我可以看到如何使用 onScroll 在滚动开始后更改 div，但我不太确定如何恢复到初始状态/类/其他内容。谢谢。

Answer 1

这不是特定于 react 的，但您可以让滚动事件设置元素上的滚动状态，然后覆盖超时调用以取消设置。基本的 jquery 示例可能是这样的:

var killscroll = null;

$(window).on('scroll', function(){
    $('.element').addClass('scrolling');

    clearTimeout(killscroll);

    killscroll = setTimeout(function(){
        $('.element').removeClass('scrolling');
    }, 100);
});

由于滚动在滚动时会触发很多次，因此这将重新定义超时，直到滚动停止触发，然后 100 毫秒后您的类将被删除。根据需要调整时间。

使用jquery以方便阅读。如果您需要原始 js 示例，我可以更新。

Here's a codepen

我假设 React 具有与 gatsby 的 wrapRootComponent 等效的东西，因此您可以将最终代码放在设置事件监听器的位置。也许 componentDidMount