时间戳

首页 > 解决方案 > 根据滚动方向更改反应样式组件的 css

reactjs - 根据滚动方向更改反应样式组件的 css

问题描述

我是新手，我想根据滚动方向更改样式组件的一些 CSS。我进行了一些研究并发现了 onScroll 但它似乎并没有根据滚动方向做一些事情。

我的屏幕左侧和右侧各有两个框，向下滚动时，我想将左右底部的框粘贴到屏幕上，而在向上滚动时，我想将左右的顶部框粘贴到屏幕而不是底部框，我不确定是否可能。

我在下面写了一个简单的 html 代码来演示网站的那部分，因为只有左右底部的框是粘性的，类似于我当前的网站。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="display: flex; flex-direction: row; justify-content: center;">
        <aside style="width: 250px; margin: 20px 20px 0;">
            <div style="width: 250px; margin: 0 0 20px; height: 400px; background-color: aqua;"></div>
            <div style="width: 250px; margin: 20px 0 0; height: 400px; background-color: darkblue; position: sticky; top: 20px;"></div>
        </aside>
        <section style="width: 850px; margin: 20px 20px 0; height: 4000px; background-color: darkgray;"></section>
        <aside style="width: 250px; margin: 20px 20px 0;">
            <div style="width: 250px; margin: 0 0 20px; height: 400px; background-color: aqua;"></div>
            <div style="width: 250px; margin: 20px 0 0; height: 400px; background-color: darkblue; position: sticky; top: 20px;"></div>
        </aside>
    </div>
</body>
</html>

标签： reactjsscrollonscroll

解决方案

推荐阅读