Skip to content

Instantly share code, notes, and snippets.

@sarahsweat
Last active April 5, 2019 13:20
Show Gist options
  • Save sarahsweat/d9822673eaab4010c296da68852c4d8c to your computer and use it in GitHub Desktop.
Save sarahsweat/d9822673eaab4010c296da68852c4d8c to your computer and use it in GitHub Desktop.
import React from 'react'
import styled from 'styled-components'
class ScrollingWrapper extends React.Component {
state = { hasScrolled: false }
componentDidMount() {
this.scrollingWrapper.addEventListener('scroll', this.onScroll)
}
onScroll = () => {
if (this.scrollingWrapper.scrollTop > 100 && !this.state.hasScrolled) {
this.setState({ hasScrolled: true })
} else if (this.scrollingWrapper.scrollTop < 100 && this.state.hasScrolled) {
this.setState({ hasScrolled: false })
}
}
scrollToTop = () => {
this.scrollingWrapper.scrollTop = 0
}
reference = id => ref => {
this[id] = ref
}
render() {
return (
<React.Fragment>
{this.state.hasScrolled && (
<ScrollToTopIconContainer onClick={this.scrollToTop}>
<div>^</div>
<Button>BACK TO TOP</Button>
</ScrollToTopIconContainer>
)}
<ScrollingWrapperContainer ref={this.reference('scrollingWrapper')}>
{this.props.children}
</ScrollingWrapperContainer>
</React.Fragment>
)
}
}
export default ScrollingWrapper
const ScrollingWrapperContainer = styled.div`
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
position: relative;
`
const ScrollToTopIconContainer = styled.div`
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -50px;
z-index: 2;
cursor: pointer;
opacity: 0.4;
text-align: center;
&:hover {
opacity: 1;
animation: wiggle 1s ease;
animation-iteration-count: 1;
}
@keyframes wiggle {
20% { transform: translateY(6px); }
40% { transform: translateY(-6px); }
60% { transform: translateY(4px); }
80% { transform: translateY(-2px); }
100% { transform: translateY(0); }
}
`
const Button = styled.div`
background: black;
color: white;
font-family: Teko;
font-size: 16px;
line-height: 30px;
border-radius: 15px;
width: 100px;
padding-top: 4px;
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment