SolidJS•2y ago

How to add events for scrolling like React? (with solid-qurey)

Hi, I've only been dealing with React projects and I'm practicing Solid-js. createResource offers powerful features, but I'm using a solid-query library that I'm more familiar with to handle async. I'm trying to implement infinite scrolls, but I've tried createRenderEffect and on but I'm not sure what event happens when scrolls reach a certain location as I think. I'd appreciate your help.

// in react project
useEffect(() => {
    if (!hasNext) return;
    const onScroll = (e: any) => {
      if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
        setDebounceCallback(() => fetchNextPage()); // I want to execute this function when the scroll is moved to a specific position

      }
    };
    window.addEventListener('scroll', onScroll);
    window.dispatchEvent(new CustomEvent('scroll'));
    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, [hasNext]);

// in react project
useEffect(() => {
    if (!hasNext) return;
    const onScroll = (e: any) => {
      if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
        setDebounceCallback(() => fetchNextPage()); // I want to execute this function when the scroll is moved to a specific position

      }
    };
    window.addEventListener('scroll', onScroll);
    window.dispatchEvent(new CustomEvent('scroll'));
    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, [hasNext]);

1 Reply

hel.io•17mo ago

solid-query has a createInfiniteQueries so you don't need to create this yourself.

Gaming

Programming

How to add events for scrolling like React? (with solid-qurey)