React Native实现ScrollView点击按钮滚动至全屏第二页

这需求用ScrollView的分页特性+滚动控制就能轻松实现，分React Native和Web两种常见场景给你方案：

React Native 实现 #

核心是利用ScrollView的pagingEnabled属性自动分页，再通过scrollTo方法实现点击跳转：

import React, { useRef } from 'react';
import { ScrollView, View, Button, Dimensions, StyleSheet } from 'react-native';

const screenHeight = Dimensions.get('window').height;

export default function PagedScrollView() {
  const scrollRef = useRef(null);

  const scrollToSecondPage = () => {
    scrollRef.current?.scrollTo({
      y: screenHeight,
      animated: true
    });
  };

  return (
    <ScrollView
      ref={scrollRef}
      pagingEnabled={true}
      showsVerticalScrollIndicator={false}
      style={styles.scrollContainer}
    >
      <View style={[styles.page, styles.page1]}>
        <Button title="跳转到第二页" onPress={scrollToSecondPage} />
      </View>
      <View style={[styles.page, styles.page2]}>
        <Button title="跳回第一页" onPress={() => scrollRef.current?.scrollTo({ y: 0, animated: true })} />
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scrollContainer: {
    height: screenHeight,
  },
  page: {
    height: screenHeight,
    justifyContent: 'center',
    alignItems: 'center',
  },
  page1: {
    backgroundColor: '#f0f0f0',
  },
  page2: {
    backgroundColor: '#e0e0e0',
  },
});

关键细节：

• pagingEnabled={true}：开启自动分页，滚动时会自动对齐到整页位置
• Dimensions.get('window').height：获取当前设备屏幕高度，确保每个页面刚好占满屏幕
• useRef：获取ScrollView实例，调用scrollTo方法精准控制滚动位置
• animated: true：添加平滑滚动动画，提升交互体验

Web 端实现 #

用CSS的滚动捕捉（scroll snap）特性配合JS控制滚动，实现同样效果：

HTML #

<div class="scroll-container">
  <div class="page page-1">
    <button onclick="scrollToPage(1)">跳转到第二页</button>
  </div>
  <div class="page page-2">
    <button onclick="scrollToPage(0)">跳回第一页</button>
  </div>
</div>

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory; /* 开启垂直强制分页 */
}

.page {
  height: 100vh;
  scroll-snap-align: start; /* 页面顶部对齐容器顶部 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-1 {
  background-color: #f0f0f0;
}

.page-2 {
  background-color: #e0e0e0;
}

JS #

function scrollToPage(pageIndex) {
  const container = document.querySelector('.scroll-container');
  container.scrollTo({
    top: pageIndex * window.innerHeight,
    behavior: 'smooth' /* 平滑滚动 */
  });
}

关键细节：

• scroll-snap-type: y mandatory：强制垂直方向滚动时对齐到分页
• scroll-snap-align: start：确保页面与容器顶部完全对齐
• scrollTo方法的behavior: 'smooth'：实现点击后的平滑跳转效果

内容的提问来源于stack exchange，提问作者Petran