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.

Practice

1. What is the main purpose of using a ScrollView in an iOS app?

easy

A. To create buttons that respond to taps

B. To allow users to scroll content that is larger than the screen

C. To display images without interaction

D. To change the app's background color

Solution

1. Step 1: Understand ScrollView's role

   A ScrollView lets users move through content that doesn't fit on the screen at once.

2. Step 2: Compare options

   Only To allow users to scroll content that is larger than the screen describes scrolling content, which is the ScrollView's purpose.

3. Final Answer:

   To allow users to scroll content that is larger than the screen -> Option B

4. Quick Check:

   ScrollView = scroll content [OK]

Hint: ScrollView enables scrolling for big content [OK]

Common Mistakes:

• Thinking ScrollView creates buttons
• Confusing ScrollView with static image display
• Assuming ScrollView changes colors

2. Which of the following is the correct way to create a vertical ScrollView in SwiftUI?

easy

A. ScrollView(.vertical) { Text("Hello") }

B. ScrollView(.horizontal) { Text("Hello") }

C. ScrollView(vertical) { Text("Hello") }

D. ScrollView(.diagonal) { Text("Hello") }

Solution

1. Step 1: Recall ScrollView initializer

   ScrollView takes a parameter for scroll direction: .vertical or .horizontal.

2. Step 2: Identify correct direction

   .vertical is for vertical scrolling, so ScrollView(.vertical) { Text("Hello") } is correct. ScrollView(.diagonal) { Text("Hello") } uses invalid .diagonal.

3. Final Answer:

   ScrollView(.vertical) { Text("Hello") } -> Option A

4. Quick Check:

   Vertical scroll = .vertical [OK]

Hint: Use .vertical for vertical scrolling in ScrollView [OK]

Common Mistakes:

• Using .diagonal which is not valid
• Confusing .horizontal with vertical
• Using incorrect syntax like ScrollView(vertical)

3. What will be the visible result of this SwiftUI code?

ScrollView(.horizontal) {
  HStack {
    ForEach(1...3, id: \ .self) { i in
      Text("Item \(i)")
        .frame(width: 100, height: 100)
        .background(Color.blue)
        .foregroundColor(.white)
        .padding(5)
    }
  }
}

medium

A. Three blue boxes labeled Item 1, Item 2, Item 3 arranged horizontally and scrollable

B. Three blue boxes arranged vertically with no scrolling

C. Only one blue box visible with no scrolling

D. Error because ScrollView cannot scroll horizontally

Solution

1. Step 1: Analyze ScrollView direction and content

   The ScrollView is horizontal, and inside is an HStack with three Text views styled as blue boxes.

2. Step 2: Understand layout and scrolling

   HStack arranges items horizontally. ScrollView allows horizontal scrolling if content is wider than screen.

3. Final Answer:

   Three blue boxes labeled Item 1, Item 2, Item 3 arranged horizontally and scrollable -> Option A

4. Quick Check:

   Horizontal ScrollView + HStack = horizontal scroll [OK]

Hint: Horizontal ScrollView + HStack = horizontal scrolling list [OK]

Common Mistakes:

• Thinking items arrange vertically inside HStack
• Assuming no scrolling happens
• Believing horizontal scroll is invalid

4. Identify the error in this SwiftUI ScrollView code:

ScrollView(.vertical) {
  VStack {
    Text("Hello")
  }
  Text("World")
}

medium

A. Text views cannot be inside ScrollView

B. ScrollView cannot scroll vertically

C. VStack cannot be used inside ScrollView

D. Multiple views inside ScrollView without a container causes error

Solution

1. Step 1: Check ScrollView content structure

   ScrollView expects a single child view. Here, VStack and Text("World") are siblings, which is invalid.

2. Step 2: Understand SwiftUI container rules

   To fix, wrap VStack and Text("World") inside a container like VStack or Group.

3. Final Answer:

   Multiple views inside ScrollView without a container causes error -> Option D

4. Quick Check:

   ScrollView needs one child view [OK]

Hint: ScrollView must have exactly one child view [OK]

Common Mistakes:

• Adding multiple sibling views directly inside ScrollView
• Thinking ScrollView can't scroll vertically
• Believing Text can't be inside ScrollView

5. You want to create a ScrollView that scrolls both vertically and horizontally to show a grid of colored squares. Which SwiftUI code snippet correctly achieves this?

hard

A. ScrollView(.horizontal) { LazyVGrid(columns: Array(repeating: GridItem(), count: 3)) { ForEach(0..<9) { i in Rectangle().fill(Color.red).frame(width: 50, height: 50) } } }

B. ScrollView(.vertical) { LazyHGrid(rows: Array(repeating: GridItem(), count: 3)) { ForEach(0..<9) { i in Rectangle().fill(Color.red).frame(width: 50, height: 50) } } }

C. ScrollView([.vertical, .horizontal]) { LazyVGrid(columns: Array(repeating: GridItem(), count: 3)) { ForEach(0..<9) { i in Rectangle().fill(Color.red).frame(width: 50, height: 50) } } }

D. ScrollView() { VStack { ForEach(0..<9) { i in Rectangle().fill(Color.red).frame(width: 50, height: 50) } } }

Solution

1. Step 1: Understand ScrollView directions

   To scroll both vertically and horizontally, pass [.vertical, .horizontal] as directions.

2. Step 2: Use grid layout inside ScrollView

   LazyVGrid with columns creates a grid that scrolls vertically and horizontally if inside a ScrollView with both directions.

3. Step 3: Check other options

   Options B and C use only one scroll direction or wrong grid type. ScrollView() { VStack { ForEach(0..<9) { i in Rectangle().fill(Color.red).frame(width: 50, height: 50) } } } uses VStack without scrolling horizontally.

4. Final Answer:

   ScrollView([.vertical, .horizontal]) { LazyVGrid(columns: Array(repeating: GridItem(), count: 3)) { ForEach(0..<9) { i in Rectangle().fill(Color.red).frame(width: 50, height: 50) } } } -> Option C

5. Quick Check:

   Both directions + LazyVGrid = scroll grid [OK]

Hint: Use ScrollView([.vertical, .horizontal]) for 2D scrolling [OK]

Common Mistakes:

• Using only one scroll direction for 2D scroll
• Mixing LazyHGrid with vertical scroll
• Not wrapping grid in ScrollView