Skip to content

Instantly share code, notes, and snippets.

@trupakufi

trupakufi/ScrollTop.js

Created May 21, 2021 23:29
Show Gist options
  • Save trupakufi/d05b36990c37a88bc737700ab69baad6 to your computer and use it in GitHub Desktop.
Save trupakufi/d05b36990c37a88bc737700ab69baad6 to your computer and use it in GitHub Desktop.
Download ZIP
Adicionando ScrollTop Controller, para verificar o quanto o usuario desceu ou subiu a página no topo da página
Raw
ScrollTop.js
import React, {useState, useEffect} from 'react'
import "./styles.css"
const ScrollController = () => {
const [scrollTop, setScrollTop] = useState(0);
const onScroll = () => {
const winScroll = document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winSCroll / height) * 100;
setScrollTop(scrolled);
}
useEffect(() => {
window.addEventListener("scroll", onScroll)
return () => window.removeEventListener("scroll", onScroll);
}, [])
return(
<>
<div classname="App">
<div className="progressWrapper">
<div className="progressContent" style={{ width: `${scrollTop}%` }}>
</div>
</div>
</div>
<p>
Adicione aqui o conteudo para aumentar o tamanho da pagina e veja o scroll funcionando.! Obrigado.!
</p>
</>
)
}
Raw
styles.css
*{
padding: 0;
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.App{
width: 100%;
min-height: 100vh;
}
.progressWrapper{
background-color: #000000;
height: 12px;
position: sticky;
top: 0;
left: 0;
z-index: 1;
width: 100%;
}
.progressContent{
height: 12px;
background: #0066ff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment