Question

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

一个例子是在路页顶部有一个固定的div，这是蓝色的，但只是在没有滚动的情况下。当滚动正在发生时，div将变为红色，然后一旦用户再次停止滚动，它将返回蓝色。我可以看到如何在滚动开始时使用onScroll更改div，但我不太确定如何恢复到初始状态/类/无论如何。感谢。

Answer 1

这不是具体的反应，但您可以让您的滚动事件设置元素的滚动状态，然后覆盖超时调用以取消设置。基本的jquery示例可能是这样的：

var killscroll = null;

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

    clearTimeout(killscroll);

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

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

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

Here's a codepen

我认为反应具有与gatsby wrapRootComponent相同的内容，因此您可以将最终代码放在设置事件侦听器的位置。也许是componentDidMount

仅在页面滚动时才显示Div

1 个答案: