ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-04 02:15:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed scrolling issues

Browse Source
This commit is contained in:
corgifist 2025-08-03 14:23:53 +03:00
parent 31bda1df7a
commit 096ff7dfec
2 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/globals.css
View File

@ -73,6 +73,11 @@ main {
height: 100%;
}
.no-scroll {
overflow: hidden;
height: 100vh; /* Optional, but often recommended for full-page scroll prevention */
}
.dark body {
background-color: var(--color-background);
}

29
src/components/swipe-to-delete/SwipeToDelete.tsx
View File

@ -31,12 +31,13 @@ const SwipeToDelete: FC<SwipeToDeleteProps> = ({
const [dragging, setDragging] = useState(false);
const [startX, setStartX] = useState(0);
const [velocity, setVelocity] = useState(0);
const [velocityY, setVelocityY] = useState(0);
const [allowOverscroll, setAllowOverscroll] = useState(false);
const [isCollapsing, setIsCollapsing] = useState(false);
const [forceTransparentBackground, setForceTransparentBackground] = useState(false);
const lastTimeRef = useRef<number>(0);
const lastXRef = useRef<number>(0);
const lastYRef = useRef<number>(0);
const lastXRef = useRef<number>(-1);
const lastYRef = useRef<number>(-1);
// measure width and thresholds
const width = container.current?.offsetWidth ?? window.innerWidth;
@ -66,13 +67,21 @@ const SwipeToDelete: FC<SwipeToDeleteProps> = ({
if (!dragging) return;
const now = performance.now();
const dt = now - lastTimeRef.current;
if (lastXRef.current === -1 || lastYRef.current === -1) {
lastXRef.current = pageX;
lastYRef.current = pageY;
return;
}
const dx = pageX - lastXRef.current;
const dy = pageY - lastYRef.current;
setVelocity(dx / dt * 1000);
const vX = dx / dt * 1000;
const vY = dy / dt * 1000;
setVelocity(vX);
setVelocityY(vY);
lastTimeRef.current = now;
lastXRef.current = pageX;
lastYRef.current = pageY;
if (Math.abs(dy) > 5 && dragX == 0) {
if (Math.abs(dy) > 5 && Math.abs(dragX) < 10) {
return;
}
@ -80,6 +89,7 @@ const SwipeToDelete: FC<SwipeToDeleteProps> = ({
const x = dragX < 0 ? rubber(raw) : rubber(raw, width * 0.1);
if (x < 0) setAllowOverscroll(true);
if (x <= 0 || (allowOverscroll && x >= 0)) setDragX(x);
if (Math.abs(vY) < 5) document.body.classList.add('no-scroll');
};
const handleDelete = () => {
@ -104,8 +114,10 @@ const SwipeToDelete: FC<SwipeToDeleteProps> = ({
if (!shouldDelete) {
content.current?.classList.add('ios-ease');
text.current?.classList.add('ios-ease');
document.body.classList.remove('no-scroll');
const textWidth = text.current ? text.current.getBoundingClientRect().width : 0;
if ((velocity < 0 || dragX < -textWidth * 1.5 && velocity > 0) && text.current) {
if (((velocity < 0 && Math.abs(velocity) > 10) || dragX < -textWidth * 1.5 && velocity > 0) && text.current && (dragX === 0 ? Math.abs(velocityY) < 5 : true)) {
setDragX(-textWidth * 1.5);
} else if (allowOverscroll && dragX > 0) {
setDragX(0);
@ -130,16 +142,18 @@ const SwipeToDelete: FC<SwipeToDeleteProps> = ({
};
const handleTouchStart = (e: TouchEvent) => {
e.preventDefault();
e.stopPropagation();
if (eventOutsideOfContainer(e)) {
setDragX(0);
return;
}
e.preventDefault();
handleStart(e.touches[0].pageX);
};
const handleTouchMove = (e: TouchEvent) => {
e.preventDefault();
e.stopPropagation();
if (eventOutsideOfContainer(e)) {
setDragX(0);
return;
@ -148,6 +162,8 @@ const SwipeToDelete: FC<SwipeToDeleteProps> = ({
};
const handleMouseStart = (e: MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (eventOutsideOfContainer(e)) {
setDragX(0);
return;
@ -157,6 +173,7 @@ const SwipeToDelete: FC<SwipeToDeleteProps> = ({
const handleMouseMove = (e: MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (eventOutsideOfContainer(e)) {
setDragX(0);
return;