Please use GhostUI instead.
react-scrollspy
Scrollspy component
Demo
Install$ npm i react-scrollspy Usage
import Scrollspy from 'react-scrollspy'
...
<div>
<div>
<section id="section-1">section 1</section>
<section id="section-2">section 2</section>
<section id="section-3">section 3</section>
</div>
<Scrollspy items={ ['section-1', 'section-2', 'section-3'] } currentClassName="is-current">
<li><a href="#section-1">section 1</a></li>
<li><a href="#section-2">section 2</a></li>
<li><a href="#section-3">section 3</a></li>
</Scrollspy>
</div>
Props
items={ Array }
Id list of target contents.
currentClassName={ String }
Class name that apply to the navigation element paired with the content element in viewport.
scrolledPastClassName={ String }
Class name that apply to the navigation elements that have been scrolled past [optional].
componentTag={ String | React element type }
HTML tag or React Component type for Scrollspy component if you want to use something other than ul [optional].
style={ Object }
Style attribute to be passed to the generated <ul/> element [optional].
offset={ Number }
Offset value that adjusts to determine the elements are in the viewport [optional].
rootEl={ String }
Name of the element of scrollable container that can be used with querySelector [optional].
onUpdate={ Function }
Function to be executed when the active item has been updated [optional].
MethodsoffEvent
Remove event listener of scrollspy.
onEvent
Add event listener of scrollspy.
Development$ git clone https://github.com/makotot/react-scrollspy.git $ cd react-scrollspy $ npm i $ npm run start Contributing
Pull requests and reporting an issue are always welcome :)
LicenseMIT
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
