Cómo hacer scroll a una posición exacta con ScrollViewReader

Marcelo Laprea

05 septiembre, 20232min de lectura

Para poder hacer scroll de manera programática a un punto en específico, tenemos que hacer uso del ScrollViewReader y su método scrollTo(_:anchor:).

El método scrollTo(_:anchor:) recibe dos parámetros:

• id: identificador de la vista a la que se hará scroll.
• anchor: es opcional y controla donde debe colocarse la vista a la que se hará scroll luego de haber terminado el scroll. Es de tipo UnitPoint, puedes probar cualquiera de los siguientes tipos:

Ejemplo de como usar el ScrollViewReader

struct ContentView: View {
  var body: some View {
    ScrollViewReader { proxy in
      // 1
      ScrollView {
        // 2
        Button("Scroll to 23") {
          withAnimation {
            proxy.scrollTo(23, anchor: .top)
          }
        }
        .padding()
        // 3
        ForEach(0..<100) { i in
          Text("\(i)")
            .font(.title2)
            .frame(width: 100, height: 100)
            .background(Color.blue)
            .id(i)
        }
      }
    }
  }
}

1. Lo primero a hacer es colocar el ScrollView o List dentro de un ScrollViewReader.

2. Luego creamos un botón, que será el encargado de realizar la acción del scrollTo(_:anchor:), en este caso, estamos diciendo que haga scroll a la posición 23 con una animación y un anchor: .top. Este botón es opcional, puedes realizar el scroll sin necesidad que el usuario interactúe con la aplicación, simplemente hay que llamar al método scrollTo(_:anchor:).

3. Por último, creamos un listado de números del 0 al 99 con un ForEach, asignándole como id el indice del ForEach, de esta forma, al llamar scrollTo(_:anchor:) a la posición 23, éste sabe a que posición hacer scroll.