Fix back/forward scroll jump issue

This commit is contained in:
Tanner Collin 2020-01-04 23:36:24 +00:00
parent 6cd41f0902
commit ced20390eb
3 changed files with 22 additions and 6 deletions

View File

@ -3,9 +3,18 @@ import { withRouter } from 'react-router-dom';
class ScrollToTop extends React.Component { class ScrollToTop extends React.Component {
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if (this.props.location.pathname !== prevProps.location.pathname) { //console.log(this.props.location.pathname, prevProps.location.pathname);
window.scrollTo(0, 0);
if (this.props.location.pathname === prevProps.location.pathname) {
return;
} }
if (localStorage.getItem('scrollLock') === 'True') {
localStorage.setItem('scrollLock', 'False');
return;
}
window.scrollTo(0, 0);
} }
render() { render() {

View File

@ -181,6 +181,7 @@ span.source {
} }
.forwardDot { .forwardDot {
cursor: pointer;
position: fixed; position: fixed;
bottom: 1rem; bottom: 1rem;
right: 1rem; right: 1rem;

View File

@ -38,13 +38,19 @@ export class ToggleDot extends React.Component {
} }
export class ForwardDot extends React.Component { export class ForwardDot extends React.Component {
goForward() {
localStorage.setItem('scrollLock', 'True');
window.history.forward();
}
render() { render() {
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (!isMobile) return null;
return ( return (
<div className='forwardDot'> <div className='forwardDot' onClick={this.goForward}>
<div className='button'> <div className='button'>
<a href='javascript:void(0)' onClick={() => window.history.forward()}>
</a>
</div> </div>
</div> </div>
); );