Блог

Здравствуйте, я использую nextjs(с react-native-web)

Я хочу, чтобы расположение прокрутки оставалось неизменным, когда я захожу за страницу, применяя бесконечные прокрутки, такие как Instagram или Twitter.

Однако, если вы используете react-virtualized для перемещения страницы и возврата назад, положение прокрутки не будет восстановлено должным образом.

Как мы можем сопоставить положение прокрутки на 100%?

Я пользуюсь переводчиком, потому что мой английский не очень хорош. Извините

Вот мой код

 import React, { useCallback, useEffect, useState, VFC } from 'react';
import _throttle from 'lodash/throttle';
import { TouchableWithoutFeedback } from 'react-native';

import {
  List,
  AutoSizer,
  WindowScroller,
  ListRowProps,
  CellMeasurer,
  CellMeasurerCache,
} from 'react-virtualized';

import dynamic from 'next/dynamic';
import { useRouter } from 'next/router';
import styled from 'styled-components/native';

const Div100vh = dynamic(() => import('react-div-100vh'), { ssr: false });

const Container = styled.SafeAreaView`
  justify-content: center;
  align-items: center;
`;

const Wrapper = styled.View`
  border: 3px solid red;
  width: 100%;
  max-width: 500px;
`;

const ListContainer = styled.View`
  border: 2px solid blue;
  flex-direction: column;
`;

const Item = styled.View`
  cursor: pointer;
  padding: 15px;
  text-align: center;
  border: 1px solid black;
`;

const StyledText = styled.Text`
  font-size: 24px;
  font-weight: 700;
`;

const DummyArr = Array.from(Array(150).keys());

const TestPage: VFC = () => {
  const router = useRouter();

  const [cache] = useState(
    new CellMeasurerCache({
      defaultHeight: 50,
      fixedWidth: true,
    }),
  );
  useEffect(() => {
    const height = sessionStorage.getItem('scroll');

    setTimeout(() => {
      window.scrollTo(0, Number(height));
    }, 0);
  }, []);

  const onClickItem = useCallback(() => {
    sessionStorage.setItem('scroll', String(window.scrollY));

    router.push('/test2');
  }, [router]);

  const rowRender = useCallback(
    (item: ListRowProps) => {
      return (
        <CellMeasurer
          cache={cache}
          columnIndex={0}
          parent={item.parent}
          rowIndex={item.index}
          key={item.key}
          style={item.style}
        >
          {({ registerChild }) => (
            <div ref={registerChild ?? ({} as any)} style={item.style}>
              <TouchableWithoutFeedback key={String(item)} onPress={onClickItem}>
                <Item>
                  <StyledText>{item.index}</StyledText>
                </Item>
              </TouchableWithoutFeedback>
            </div>
          )}
        </CellMeasurer>
      );
    },
    [cache, onClickItem],
  );
  if (typeof window === 'undefined') return null;

  return (
    <Div100vh>
      <Container>
        <Wrapper>
          <ListContainer>
            <WindowScroller scrollElement={window}>
              {({ height, isScrolling, onChildScroll, scrollTop }) => (
                <AutoSizer disableHeight>
                  {({ width }) => (
                    <List
                      deferredMeasurementCache={cache}
                      autoHeight
                      width={width}
                      height={height}
                      isScrolling={isScrolling}
                      onScroll={onChildScroll}
                      rowCount={DummyArr.length}
                      rowHeight={cache.rowHeight}
                      scrollTop={scrollTop}
                      rowRenderer={rowRender}
                    />
                  )}
                </AutoSizer>
              )}
            </WindowScroller>
          </ListContainer>
        </Wrapper>
      </Container>
    </Div100vh>
  );
};

export default TestPage;
 

Вот в чем моя проблема

1. 40 индекс вверху, 47 щелчок по индексу («/тест»)
2. После перемещения страницы (‘/test2’)
3. вернитесь на предыдущую страницу, индекс 42-43 вверху («/тест»)