Остановить прокрутку кнопки react show more до нижней части содержимого

#javascript #reactjs

Вопрос:

У меня есть следующий компонент todo. Цель состоит в том, чтобы показать 10 задач, а при щелчке More показать еще 10.

 const ToDoList = ({ todos }) => {
  const [viewCount, setViewCount] = useState(1);

  const handleViewMore = (e) => {
    setViewCount(viewCount   1);
  };
  
  return (
    <div>
      <div>
        {
          todos.slice(0, viewCount * 10)
            .map((todo, index) => (
              <ToDo {...todo} key={index} />
            ))
        }
      </div>
      <button onClick={handleViewMore}>More</button>
    </div>
  );
};

Проблема в том, что при щелчке More добавляются дополнительные задачи, однако прокрутка Windows по-прежнему выполняется с помощью кнопки под добавленными задачами.

Например, если 10 задач дают window.scrollY 1000, когда я нажимаю More , winodw.scrollY теперь 2000, но я хочу, чтобы оно оставалось на уровне 1000, чтобы позволить пользователю прокручивать следующие 10.

Стоит отметить, что этого не произойдет, если я изменю кнопку на a или span .

Есть идеи? Спасибо!

Вот версия проблемы в codesandbox —https://codesandbox.io/s/dry-snowflake-wl2h8?file=/src/App.js

Я включил More Broken кнопку, а также More Expected диапазон. Я бы хотел, чтобы кнопка вела себя так, как это делает span.

1. В принципе, вы хотите, чтобы позиция прокрутки была в первом элементе новых 10 задач?

2. добавление интерактивного примера поможет людям ответить на ваш вопрос; codesandbox или что-то в этом роде

3. @bertdida точно да.

4. в вашем примере прокрутка не меняется, она остается равной 0 после нажатия кнопки «Еще»

5. @dulebov.artem пожалуйста, попробуйте сейчас

Ответ №1:

Это странно, это какое-то новое поведение, которое происходит только в последней версии Chrome (85, может быть, 84). Все остальные браузеры в вашем случае сохраняют положение прокрутки. Это может быть ошибка или особенность, не уверен, между тем вы можете

измените onClick на onMouseDown и

   const handleViewMore = (e) => {
    e.preventDefault()  
    setViewCount(viewCount   1);
  };

Ответ №2:

Вы могли бы сохранить текущую позицию прокрутки, прежде чем нажимать кнопку «Еще» и прокручивать ее обратно

 const [viewCount, setViewCount] = useState(1)
const [currentScrollTop, setCurrentScrollTop] = useState(0)

const handleViewMore = (e) => {
  setCurrentScrollTop(document.documentElement.scrollTop)
  setViewCount(viewCount   1)
}

useEffect(() => {
  window.scrollTo(0, currentScrollTop)
}, [currentScrollTop])

Ссылка на Codesandbox

Ответ №3:

Вы можете использовать это:

 useEffect(() => {
  window.scrollTo(0, 0)
}, [viewCount])