@hysight/scroll-table NPM

@hysight/scroll-table

@hysight/scroll-table uses react hooks and typescript to write a scrolling list plugin

Install

$ npm install @hysight/scroll-table --save

$ yarn add @hysight/scroll-table

Usage

import ScrollTable from '@hysight/scroll-table';
const { LevelScroll } = ScrollTable;

// Scroll up

<ScrollTable
    // scrollSpeed='linear'
    scrollSpeed='ease'
    scrollTime={1000}
    scrollHeight={54}
    scrollRows={5}
    delayTime={2000}
    count={4}
>
    <div style={{height: '54px'}}>list1</div>
    <div style={{height: '54px'}}>list1</div>
    <div style={{height: '54px'}}>list1</div>
    <div style={{height: '54px'}}>list1</div>
    or
    <ScrollContent />
</ScrollTable>

// Scroll left
<LevelScroll>
    <span style={{'marginLeft': '20px'}}>list1</span>
    <span style={{'marginLeft': '20px'}}>list1</span>
    <span style={{'marginLeft': '20px'}}>list1</span>
    <span style={{'marginLeft': '20px'}}>list1</span>
    or
    <ScrollContent />
</LevelScroll>

TypeScript

@hysight/scroll-table is written in TypeScript with complete definitions

ScrollTable Props

Scroll up

Prop	Default	Type	Description
className	''	string	组件追加的className名称
scrollSpeed	'linear'	string	linear ease-in ease-in-out
scrollTime	2000	number	单个滚动所用时间，单位ms
scrollHeight	27	number	单个滚动所需高度，单位px
scrollRows	5	number	可视区域显示N个元素
delayTime	1000	number	滚动间隔延迟时间，单位ms
count	Infinity	number	数据总条数