react-blocks-scroll-sync ·

Synchronously scrolling multiple blocks.

Install

npm i --save react-blocks-scroll-sync

Quick Overview

importReact,{useCallback}from'react'importContainerfrom'react-blocks-scroll-sync'constBlock=Container.BlockconstrandomColor=()=>{constr=Math.floor(Math.random()*256)constg=Math.floor(Math.random()*256)constb=Math.floor(Math.random()*256)constcolor=`rgb(${r},${g},${b})`returncolor}constApp=()=>{constrenderMultiBox=useCallback(()=>{returnnewArray(100).fill(1).map((v,k)=>{return(<divkey={k}style={{width: 200,backgroundColor: randomColor(),height: Math.floor(Math.random()*300)+200}}>{k}</div>)})},[])return(<divstyle={{display: 'flex'}}><Container><Block>{renderMultiBox()}</Block><Block>{renderMultiBox()}</Block><Block>{renderMultiBox()}</Block></Container></div>)}exportdefaultApp

Tips

⚠️ The number of child elements of each <Block /> component need to be same.