CODEWITHSUNDEEP
javascripthtmlreactjstypescriptscroll
Pedro Zago
Pedro Zago

Reputation: 31

Scroll to the top list item without scrolling the view - ReactJS

I want to scroll to an item in the list, but when I click on the item my entire view scrolls. I would like the scroll to be only for the div with the list.

    <AlertsList>
            {productInventoryAlert?.map((product, index) => {
              const itemRef = createRef<HTMLLIElement>();

              const handleScrollIntoView = (index: number) => {
                if (expandedCard === index) {
                  setExpandedCard(-1);
                } else {
                  setExpandedCard(index);
                }

                itemRef.current?.scrollIntoView(true);
              }

              return (
                <li ref={itemRef} key={index}>
                  <DashboardInventoryAlertListItem
                    handleScrollIntoView={handleScrollIntoView}
                    product={product}
                    index={index}
                    expandedCard={expandedCard}
                  />
                </li>
              );
            })}
    </AlertsList>

    export const AlertsList = styled.ul`
      max-height: 250px;
      overflow: scroll;
      list-style: none;
      scroll-behavior: smooth;
     `;

Upvotes: 0

Views: 1751

Answers (1)

Pedro Zago
Pedro Zago

Reputation: 31

I solved it by taking the window scroll and set the same value after configuring the scroll of the component.

before

itemRef.current?.scrollIntoView(true);

after

const { scrollX, scrollY } = window;
itemRef.current?.scrollIntoView(true);
window.scrollTo(scrollX, scrollY);

Upvotes: 3

Related Questions