Fix back/forward scroll jump issue

master
Tanner Collin 4 years ago
parent 6cd41f0902
commit ced20390eb
  1. 13
      webclient/src/ScrollToTop.js
  2. 1
      webclient/src/Style-light.css
  3. 14
      webclient/src/utils.js

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

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

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

Loading…
Cancel
Save