forked from tanner/qotnews
Fix back/forward scroll jump issue
This commit is contained in:
parent
6cd41f0902
commit
ced20390eb
|
@ -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() {
|
||||||
|
|
|
@ -181,6 +181,7 @@ span.source {
|
||||||
}
|
}
|
||||||
|
|
||||||
.forwardDot {
|
.forwardDot {
|
||||||
|
cursor: pointer;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 1rem;
|
bottom: 1rem;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user