ScrollView in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

ScrollView Content Size Behavior

What will happen if you place a VStack with fixed height inside a ScrollView without setting the ScrollView frame height?

iOS Swift

ScrollView {
  VStack {
    Rectangle().frame(height: 1000)
  }
}

A The ScrollView will not scroll and only show content fitting the screen height.

B The ScrollView will scroll vertically to show all content.

C The ScrollView will crash due to ambiguous height constraints.

D The ScrollView will scroll horizontally instead of vertically.

💡 Hint

Think about how ScrollView calculates its content size based on child views.

ScrollView automatically sizes its content area to fit the child views. Since the VStack has a fixed height of 1000, the ScrollView will allow vertical scrolling to show all content.

❓ lifecycle

intermediate

ScrollView and State Updates

If you update a @State variable inside a ScrollView's content, what happens to the ScrollView's position?

iOS Swift

struct ContentView: View {
  @State private var count = 0
  var body: some View {
    ScrollView {
      VStack {
        Text("Count: \(count)")
        Button("Increment") { count += 1 }
      }
    }
  }
}

A The ScrollView resets to the top when the state changes.

B The ScrollView scrolls to the bottom automatically after the state changes.

C The ScrollView keeps its current scroll position after the state changes.

D The ScrollView crashes due to state update inside its content.

💡 Hint

Think about how SwiftUI preserves scroll position on state updates.

SwiftUI preserves the scroll position when the view updates due to state changes inside ScrollView content. The ScrollView does not reset or jump automatically.

❓ navigation

advanced

Programmatic ScrollView Scrolling

Which code snippet correctly scrolls a ScrollView to the bottom when a button is tapped?

A

ScrollViewReader { proxy in
  VStack {
    Button("Scroll to Bottom") {
      proxy.scrollTo("bottom", anchor: .bottom)
    }
    ScrollView {
      VStack {
        ForEach(0..<50) { i in
          Text("Item \(i)").id(i)
        }
        Text("Bottom").id("bottom")
      }
    }
  }
}

B

ScrollView {
  VStack {
    ForEach(0..<50) { i in
      Text("Item \(i)")
    }
  }
  Button("Scroll to Bottom") {
    scrollToBottom()
  }
}
func scrollToBottom() {
  // No ScrollViewReader used
}

C

ScrollViewReader { proxy in
  ScrollView {
    VStack {
      ForEach(0..<50) { i in
        Text("Item \(i)").id(i)
      }
      Button("Scroll to Bottom") {
        proxy.scrollTo(50, anchor: .bottom)
      }
    }
  }
}

D

ScrollViewReader { proxy in
  ScrollView {
    VStack {
      ForEach(0..<50) { i in
        Text("Item \(i)").id(i)
      }
    }
  }
  Button("Scroll to Bottom") {
    proxy.scrollTo(49, anchor: .bottom)
  }
}

💡 Hint

Remember to use ScrollViewReader and assign IDs to scroll targets.

Option A correctly uses ScrollViewReader to get a proxy, assigns IDs to views, and calls scrollTo with the correct ID. Other options either lack ScrollViewReader or place the button inside ScrollView incorrectly.

📝 Syntax

advanced

Correct ScrollView Axis Syntax

Which code snippet correctly creates a horizontal ScrollView in SwiftUI?

A

ScrollView(.horizontal, showsIndicators: false) {
  VStack {
    Text("One")
    Text("Two")
  }
}

B

ScrollView(axis: .horizontal) {
  HStack {
    Text("One")
    Text("Two")
  }
}

C

ScrollView(direction: .horizontal) {
  HStack {
    Text("One")
    Text("Two")
  }
}

D

ScrollView(.horizontal) {
  HStack {
    Text("One")
    Text("Two")
  }
}

💡 Hint

Check the official ScrollView initializer parameters.

Option D uses the correct initializer with axis parameter as .horizontal and a matching HStack inside. Option D and C use wrong parameter names. Option D uses VStack inside horizontal ScrollView, which is allowed but less common and may cause layout issues.

🔧 Debug

expert

ScrollView Content Not Scrolling

Why does this ScrollView not scroll even though the content is larger than the screen?

iOS Swift

ScrollView {
  VStack {
    ForEach(0..<20) { i in
      Text("Item \(i)").frame(height: 50)
    }
  }
}.frame(height: 200)

A The ScrollView frame height is fixed, but the VStack does not expand beyond 200, so no scrolling occurs.

B The ScrollView frame height is fixed, but the VStack content size is not larger than 200, so no scrolling.

C The ScrollView frame height is fixed, but the VStack content is clipped, preventing scrolling.

D The ScrollView frame height is fixed to 200, so it only shows that height and scrolls the rest.

💡 Hint

Check the total height of VStack content compared to ScrollView frame height.

Each Text has height 50, 20 items total 1000 height. But the VStack inside ScrollView does not expand beyond the ScrollView frame height of 200 because ScrollView limits its child size. So content size is not larger than frame, no scrolling.