react-anchor-scroll-detect
anchor scroll detect for react
Last updated 21 days ago by superwyk .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-anchor-scroll-detect 
SYNC missed versions from official npm registry.

该组件两个功能:1.点击锚点,滚动到指定位置,2.滚动页面,获取可视区域对应的锚点

安装

$ npm install react-anchor-scroll-detect --save

例子

$ git clone https://github.com/superwyk/react-anchor-scroll-detect.git
$ cd react-anchor-scroll-detect
$ npm i
$ npm run start

使用

import AnchorDetect from 'react-anchor-scroll-detect'
...
<div>
    <AnchorDetect className="anchor" items={['section1', 'section2', 'section3', 'section4', 'section5', 'section6']} activeClass="active" offsetTop={20}>
        <li>section1</li>
        <li>section2</li>
        <li>section3</li>
        <li>section4</li>
        <li>section5</li>
        <li>section6</li>
    </AnchorDetect>
    <section id="section1" style={{marginTop: '21px'}}>
      ...
    </section>
    <section id="section2">
      ...
    </section>
    <section id="section3">
      ...
    </section>
    <section id="section4">
      ...
    </section>
    <section id="section5">
      ...
    </section>
    <section id="section6">
      ...
    </section>
</div>

属性props

  • items

锚点(anchor)目标元素id集合

  • activeClass

处在可视区域中的锚点目标元素对应的锚点的类名(class)

  • offsetTop

距离top的偏移量

  • componentTag

锚点元素的父元素的标签名

  • container

可滚动区域容器,默认为window

  • className

锚点元素的父元素的class

  • style

锚点元素的父元素的style

github

https://github.com/superwyk/react-anchor-scroll-detect

License

MIT

Current Tags

  • 0.1.1                                ...           latest (21 days ago)

2 Versions

  • 0.1.1                                ...           21 days ago
  • 0.1.0                                ...           23 days ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 31
Dependencies (3)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |