S
SolidJS•3y 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
hel.io•3y ago
solid-query has a createInfiniteQueries so you don't need to create this yourself.

Did you find this page helpful?