sonny/newsreader
1
0
Fork 0
Code Issues 13 Pull requests 2 Projects Releases 58 Packages Wiki Activity Actions

Only show buttons when needed

Browse source
This commit is contained in:
Sonny Bakker 2021-07-21 21:06:46 +02:00
parent b9c749d4e4
commit 38b2d91f18
1 changed files with 33 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/newsreader/js/pages/homepage/components/ScrollTop.js
View file

@ -1,24 +1,40 @@
import React from 'react';
// TODO show buttons when applicable
// TODO caclulating height needs to take into account react renders later?
const scrollTop = () => {
if (document.body.clientHeight < document.documentElement.clientHeight) {
export default class ScrollTop extends React.Component {
scrollListener = ::this.scrollListener;
state = { showTop: false, showBottom: false };
componentDidMount() {
window.addEventListener('scroll', this.scrollListener);
}
scrollListener() {
const showBottom = window.innerHeight + window.scrollY < document.body.offsetHeight;
this.setState({
showTop: window.pageYOffset > 0 ? true : false,
showBottom: showBottom,
});
}
render() {
return (
<div className="scroll-to-top">
<i
className="scroll-to-top__icon scroll-to-top__icon--top"
onClick={() => window.scrollTo(0, 0)}
/>
<i
className="scroll-to-top__icon scroll-to-top__icon--bottom"
onClick={() => window.scrollTo(0, document.body.scrollHeight)}
/>
{this.state.showTop && (
<i
className="scroll-to-top__icon scroll-to-top__icon--top"
onClick={() => window.scrollTo(0, 0)}
/>
)}
{this.state.showBottom && (
<i
className="scroll-to-top__icon scroll-to-top__icon--bottom"
onClick={() => window.scrollTo(0, document.body.scrollHeight)}
/>
)}
</div>
);
}
return null;
};
export default scrollTop;
}