|
@ -21,36 +21,36 @@ class ScrollSyncSection extends Component { |
|
|
itemTopOffsets: [], |
|
|
itemTopOffsets: [], |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
this.calculateItemTopOffsets = this.calculateItemTopOffsets.bind(this); |
|
|
this.calculateItemTopOffsets = this.calculateItemTopOffsets.bind(this); |
|
|
this.handleResize = this.handleResize.bind(this); |
|
|
this.handleResize = this.handleResize.bind(this); |
|
|
this.handleScroll = this.handleScroll.bind(this); |
|
|
this.handleScroll = this.handleScroll.bind(this); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
componentDidMount() { |
|
|
componentDidMount() { |
|
|
this.calculateItemTopOffsets(); |
|
|
this.calculateItemTopOffsets(); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', this.handleResize); |
|
|
window.addEventListener('resize', this.handleResize); |
|
|
window.addEventListener('scroll', this.handleScroll); |
|
|
window.addEventListener('scroll', this.handleScroll); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
componentWillUnmount() { |
|
|
componentWillUnmount() { |
|
|
window.removeEventListener('resize', this.handleResize); |
|
|
window.removeEventListener('resize', this.handleResize); |
|
|
window.removeEventListener('scroll', this.handleScroll); |
|
|
window.removeEventListener('scroll', this.handleScroll); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
calculateItemTopOffsets() { |
|
|
calculateItemTopOffsets() { |
|
|
const {section} = this.props; |
|
|
const {section} = this.props; |
|
|
|
|
|
|
|
|
const itemIds = _getItemIds(section.items); |
|
|
const itemIds = _getItemIds(section.items); |
|
|
this.setState({ |
|
|
this.setState({ |
|
|
itemTopOffsets: _getElementTopOffsetsById(itemIds), |
|
|
itemTopOffsets: _getElementTopOffsetsById(itemIds), |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
handleResize() { |
|
|
handleResize() { |
|
|
this.calculateItemTopOffsets(); |
|
|
this.calculateItemTopOffsets(); |
|
|
this.handleScroll(); |
|
|
this.handleScroll(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
handleScroll() { |
|
|
handleScroll() { |
|
|
const {itemTopOffsets} = this.state; |
|
|
const {itemTopOffsets} = this.state; |
|
@ -63,7 +63,7 @@ class ScrollSyncSection extends Component { |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
return window.scrollY >= itemTopOffset.offsetTop; |
|
|
return window.scrollY >= itemTopOffset.offsetTop; |
|
|
}); |
|
|
}); |
|
|
this.setState({ |
|
|
this.setState({ |
|
|
activeItemId: item ? item.id : '', |
|
|
activeItemId: item ? item.id : '', |
|
|
}); |
|
|
}); |
|
@ -71,12 +71,7 @@ class ScrollSyncSection extends Component { |
|
|
|
|
|
|
|
|
render() { |
|
|
render() { |
|
|
const {activeItemId} = this.state; |
|
|
const {activeItemId} = this.state; |
|
|
return ( |
|
|
return <Section isScrollSync activeItemId={activeItemId} {...this.props} />; |
|
|
<Section |
|
|
|
|
|
isScrollSync |
|
|
|
|
|
activeItemId={activeItemId} {...this.props} |
|
|
|
|
|
/> |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -103,6 +98,6 @@ const _getElementTopOffsetsById = ids => |
|
|
offsetTop: element.offsetTop, |
|
|
offsetTop: element.offsetTop, |
|
|
}; |
|
|
}; |
|
|
}) |
|
|
}) |
|
|
.filter(item => item); |
|
|
.filter(item => item); |
|
|
|
|
|
|
|
|
export default ScrollSyncSection; |
|
|
export default ScrollSyncSection; |
|
|