滚动到顶部列表项而不滚动视图 - ReactJS

Question

我想滚动到列表中的某个项目，但是当我单击该项目时，我的整个视图都会滚动。我希望滚动仅适用于列表中的 div。

    <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;
     `;

Answer 1

我是通过window滚动并在配置组件的滚动后设置相同的值来解决的。

之前

itemRef.current?.scrollIntoView(true);

之后

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

滚动到顶部列表项而不滚动视图 - ReactJS

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

html

javascript

scroll

typescript

reactjs