d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-20 15:09:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature: 悬浮按钮调整；

Browse Source 
目录进度条bug修复
This commit is contained in:
tangly1024
2022-01-12 12:37:12 +08:00
parent d926c726b5
commit 5b69aaa3a5
9 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/Progress.js
View File

@@ -9,11 +9,12 @@ const Progress = ({ targetRef, showPercent = true }) => {
const currentRef = targetRef?.current || targetRef
const [percent, changePercent] = useState(0)
const scrollListener = () => {
if (currentRef) {
const clientHeight = currentRef ? (currentRef.clientHeight) : 0
const target = currentRef || document.getElementById('container')
if (target) {
const clientHeight = target.clientHeight
const scrollY = window.pageYOffset
const fullHeight = clientHeight - window.outerHeight
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
if (per > 100) per = 100
if (per < 0) per = 0
changePercent(per)
@@ -25,11 +26,18 @@ const Progress = ({ targetRef, showPercent = true }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [percent])
return (<div className='h-4 w-full shadow-2xl bg-gray-400 font-sans'>
<div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}>
{showPercent && <div className='text-right text-white text-xs'>{percent}%</div>}
return (
<div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
<div
className="h-4 bg-gray-600 duration-200"
style={{ width: `${percent}%` }}
>
{showPercent && (
<div className="text-right text-white text-xs">{percent}%</div>
)}
</div>
</div>)
</div>
)
}
export default Progress