反应卷轴

React Scrollfade是一个 React 组件,旨在以滚动条位置为基础,动态地淡出可滚动元素的下部.

安装

您可以使用 npm 安装库 :

npm install @benestudioco/react-scrollfade

怎样用

它的工作需要零配置。 只要把它作为可滚动元素的直系子. 淡出使元素底部透明,因此淡出颜色由它下面的东西决定.

import React from "react";
import ScrollFade from "@benestudioco/react-scrollfade";

export const Example = () =>
 <div
        style={{
            width: 200,
            height: 100,
            overflowY: 'auto',
            background: 'red',
        }}
    >
        <ScrollFade />
        Dolor amet eu occaecat excepteur do adipisicing cillum duis. Est ullamco ullamco sit ea irure consequat
        id do ex enim consectetur nisi duis elit. Qui mollit magna exercitation est sit.
    </div>

浏览器支持

该部分使用CSS口罩和-webkit-masks作为倒扣. 此处参见浏览器兼容性 : https://caniuse.com/?search=mask (中文(中国大陆) )

实例

有互动的例子.

npm run examples 开始一个可以查看它们的例子.

捐款

我们欢迎以拉动请求形式提供的捐助. 这些例子也充当了开发服务器.

如有任何问题、问题或建议,请重新印发.