Klectr/KSlab
1
0
Fork 0
generated from Klectr/KTemplate
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'fix(scroll): fix issue with scrolll positino not persisting on reload' (#12) from bug/safari-scroll into main

Browse Source 
Reviewed-on: #12
This commit is contained in:
Triston Armstrong 2024-10-22 18:31:40 +00:00
commit 32b05d76f0
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/InfinateCanvas.tsx
View File

@ -10,10 +10,12 @@ import { Logo } from "./Logo"
import { useThemeDetector } from "../utils/useThemeDetector" import { useThemeDetector } from "../utils/useThemeDetector"
import { TextItem } from "./TextItem" import { TextItem } from "./TextItem"
import texts from "../signals/texts" import texts from "../signals/texts"
import { useDebounce } from "../utils/useDebounce"
export default function InfiniteCanvas() { export default function InfiniteCanvas() {
const containerRef = useRef<HTMLDivElement>(null) const containerRef = useRef<HTMLDivElement>(null)
const isDarkTheme = useThemeDetector() const isDarkTheme = useThemeDetector()
const { debounce } = useDebounce()
useEffect(() => { useEffect(() => {
const initPos = getInitialPosition(canvasDimentsion) const initPos = getInitialPosition(canvasDimentsion)
@ -27,22 +29,24 @@ export default function InfiniteCanvas() {
} }
function _updatePosition() { function _updatePosition() {
localStorage.setItem("pos", JSON.stringify({ debounce(() => {
left: window.scrollX, localStorage.setItem("pos", JSON.stringify({
top: window.scrollY left: window.scrollX,
})) top: window.scrollY
}))
})
} }
_updateDimensions() _updateDimensions()
window.addEventListener("resize", _updateDimensions) window.addEventListener("resize", _updateDimensions)
window.addEventListener("scrollend", _updatePosition) window.addEventListener("scroll", _updatePosition)
notes.loadLocalStorage() notes.loadLocalStorage()
images.loadLocalStorage() images.loadLocalStorage()
texts.loadLocalStorage() texts.loadLocalStorage()
return () => { return () => {
window.removeEventListener("resize", _updateDimensions) window.removeEventListener("resize", _updateDimensions)
window.removeEventListener("scrollend", _updatePosition) window.removeEventListener("scroll", _updatePosition)
} }
}, []) }, [])