[feature] Scroll speed according to distance from edge #1907

Activity

1. gap777 commented on Mar 23, 2023

   

   gap777

   on Mar 23, 2023

   More actions

   @koraykural Can you post your work-around implementation of scrollFn?

   👍React with 👍1Reacted by Ben
2. koraykural commented on Mar 23, 2023

   

   koraykural

   on Mar 23, 2023

   Author

   More actions

   @koraykural Can you post your work-around implementation of scrollFn?

   Sorry, I could not find it. It was an old project.
3. jongmin4943 commented on Apr 4, 2023

   

   jongmin4943

   on Apr 4, 2023

   Last edited by jongmin4943

   More actions

   @gap777 Well, I made something work-around implementation that scroll speed increases gradually. It also considers the mouse position outside of window. If u need it, just adjust some codes below

   const onStart = (e) => {
     startScrollFn(e);
   };
   const onEnd = (e) => {
     initScrollVars();
   };
   
   type Direction = "up" | "down" | "right" | "left";
   let pointerId: number;
   let targetScrollEl: HTMLElement | null;
   let lastPointerEvent: PointerEvent;
   let interval;
   let scrollSpeed = 3;
   const speedIncreaseFactor = 0.001;
   let lastMoveDirection: Direction;
   const initScrollSpeed = () => (scrollSpeed = 3);
   const onMouseMove = (event: PointerEvent) => {
     if (targetScrollEl) {
       lastPointerEvent = event;
     }
   };
   
   const startScrollFn = (e) => {
     const context = e.from as HTMLDivElement;
     pointerId = e.originalEvent.pointerId;
     targetScrollEl = getClosestScrollableEl(context);
     if (targetScrollEl) {
       targetScrollEl.setPointerCapture(pointerId);
       targetScrollEl.addEventListener("pointermove", onMouseMove);
       clearInterval(interval);
       interval = setInterval(() => {
         scrollFn(lastPointerEvent, targetScrollEl);
       });
     }
   };
   
   const initScrollVars = () => {
     if (targetScrollEl?.hasPointerCapture(pointerId)) {
       targetScrollEl?.releasePointerCapture(pointerId);
     }
     targetScrollEl?.removeEventListener("pointermove", onMouseMove);
     targetScrollEl = null;
     initScrollSpeed();
     clearInterval(interval);
   };
   
   const scrollFn = (e: PointerEvent, container: HTMLElement | null) => {
     if (!container || !e) return false;
   
     targetScrollEl = container;
     const { moveDirection, x, y } = getScrollResult(container, e);
   
     container.scrollBy(x, y);
     if (e !== lastPointerEvent) {
       scrollSpeed = round(scrollSpeed + speedIncreaseFactor, 3);
     }
     if (moveDirection !== lastMoveDirection) {
       initScrollSpeed();
     }
     if (moveDirection) lastMoveDirection = moveDirection;
     return false;
   };
   
   const getScrollResult = (container: HTMLElement, e: PointerEvent) => {
     let moveDirection: Direction | null = null;
     let x = 0;
     let y = 0;
     const scrollSensitivity = props.option?.scrollSensitivity || 50;
     const { top, bottom, left, right } = container.getBoundingClientRect();
     const topDistance = e.clientY - top;
     const bottomDistance = bottom - e.clientY;
     const leftDistance = e.clientX - left;
     const rightDistance = right - e.clientX;
     if (topDistance < scrollSensitivity) {
       y = (-(scrollSensitivity - topDistance) / scrollSensitivity) * scrollSpeed;
       moveDirection = "up";
     } else if (bottomDistance < scrollSensitivity) {
       y =
         ((scrollSensitivity - bottomDistance) / scrollSensitivity) * scrollSpeed;
       moveDirection = "down";
     }
     if (leftDistance < scrollSensitivity) {
       x = (-(scrollSensitivity - leftDistance) / scrollSensitivity) * scrollSpeed;
       moveDirection = "left";
     } else if (rightDistance < scrollSensitivity) {
       x = ((scrollSensitivity - rightDistance) / scrollSensitivity) * scrollSpeed;
       moveDirection = "right";
     }
     return { moveDirection, x, y };
   };

   FYI, It's actually for Vue components and used customized Sortable so some function's parameters might be different from original. You also have to call the method scrollFn in above code snippet when Sortable calls original scrollFn too.

   <draggable
     :scroll-fn="(e, container)=>scrollFn(e, container)"
   >
   </draggable>

   something like this

   👍React with 👍2Reacted by daft and Inom

   ❤️React with ❤️1Reacted by tlietz