Fix back/forward scroll jump issue
This commit is contained in:
		| @@ -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> | ||||
| 		); | ||||
|   | ||||
		Reference in New Issue
	
	Block a user