Метод scrollTo

Метод scrollTo вызывают на ссылке ref компонента ScrollView. Он сдвигает видимую область к точке с координатами x и y относительно начала прокрутки.

Синтаксис

ref.current.scrollTo({ x, y, animated });

Параметры

Параметр	Описание
`x`	Смещение по горизонтали в логических пикселях.
`y`	Смещение по вертикали в логических пикселях.
`animated`	При `true` прокрутка идет с анимацией.

Пример

Давайте прокрутим список на 100 пикселей вниз по кнопке:

import { useRef } from 'react';
import { ScrollView, Text, Pressable } from 'react-native';

export default function App() {
	const ref = useRef(null);

	return (
		<>
			<Pressable onPress={() => ref.current?.scrollTo({ y: 100, animated: true })}>
				<Text>abcde</Text>
			</Pressable>
			<ScrollView ref={ref}>
				<Text>12345</Text>
				<Text>abcde</Text>
			</ScrollView>
		</>
	);
}

На экране после нажатия область прокрутки сместится вниз на заданное расстояние.

Пример

Давайте вернем прокрутку к началу без анимации:

import { useRef } from 'react';
import { ScrollView, Text, Pressable } from 'react-native';

export default function App() {
	const ref = useRef(null);

	return (
		<>
			<Pressable onPress={() => ref.current?.scrollTo({ x: 0, y: 0, animated: false })}>
				<Text>12345</Text>
			</Pressable>
			<ScrollView ref={ref} horizontal>
				<Text>abcde</Text>
				<Text>12345</Text>
			</ScrollView>
		</>
	);
}

На экране горизонтальная прокрутка сразу вернется к левому краю.

Смотрите также

метод scrollToEnd,
который прокручивает к концу содержимого
компонент ScrollView,
который прокручивает дочерние элементы
компонент FlatList,
который прокручивает длинный список
метод scrollToOffset,
который прокручивает список к смещению