이한울
이한울
PostsComments
SSolidJS
Created by 이한울 on 7/23/2023 in #support
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]);
2 replies