Hide text after scrolling (SwiftUI)

Question

How can I hide my arrow text after ScrollView has scrolled?

struct Skroll: View {
    
    var body: some View {
        
        VStack(alignment: .trailing) {
            
            Text("<-")
                .font(.system(size: 25).bold())
                .kerning(-3)
            
            ScrollView(.horizontal, showsIndicators: false) {
                
                HStack {
                    Rectangle()
                        .frame(width: 200, height: 300)
                        .cornerRadius(20)
                    Rectangle()
                        .frame(width: 200, height: 300)
                        .cornerRadius(20)
                    Rectangle()
                        .frame(width: 200, height: 300)
                        .cornerRadius(20)
                }
            }
        }
        .padding()
    }
    
}

I can't figure out how can I hide text after scrolling, I'm new and just learning SwiftUI

I tried to use ScrollViewReader but I didn't understand how it works — Denis, Aug 29 '22 at 15:36
Try the [Apple SwiftUI Tutorials](https://developer.apple.com/tutorials/swiftui) get some basics, once you get a good foundation you will be able to ask more specific questions that are inline with SO. Please take the [tour](https://stackoverflow.com/tour) and read [How to Ask](https://stackoverflow.com/help/how-to-ask) to improve, edit and format your questions. SO is not a code writing service, there are other websites were you can hire someone. — lorem ipsum, Aug 29 '22 at 15:42
I did not ask you to write the code for me, I asked how I can implement a specific function — Denis, Aug 29 '22 at 15:59

score 0 · Answer 1 · answered Aug 29 '22 at 18:57

0

Looks like what you need is to get the current position of the scroll view. See here on how to do that. Then you can choose to display Text("<-") based on a flag which is modified when ScollView reaches a certain point

if !hideText {
    Text("<-")
        .font(.system(size: 25).bold())
        .kerning(-3)
}

It might be also possible that you might achieve the same result by moving your Text("<-") inside the scroll view. See if below works for you

ScrollView(.horizontal, showsIndicators: false) {
                
    Text("<-")
        .font(.system(size: 25).bold())
        .kerning(-3)

    HStack {
        Rectangle()
            .frame(width: 200, height: 300)
            .cornerRadius(20)
        Rectangle()
            .frame(width: 200, height: 300)
            .cornerRadius(20)
        Rectangle()
             .frame(width: 200, height: 300)
             .cornerRadius(20)
    }
}

answered Aug 29 '22 at 18:57

Suyash Medhavi

1,135
6
18

I figured out how to get the current position, thanks, but I don't understand how I can use it for `if !hideText` Yes moving Text("<-") inside the scroll view suits me – Denis Aug 29 '22 at 23:12
You could use the `scrollViewOffset` to change the value of `hideText` and use this flag to decide if to show the Text view or not – Suyash Medhavi Aug 30 '22 at 13:05
Don't forget to select an answer and mark this question as resolved – Suyash Medhavi Aug 30 '22 at 13:06
I also wrote an answer, but I'm not sure if this is the right solution – Denis Aug 30 '22 at 17:58

score 0 · Answer 2 · answered Aug 30 '22 at 00:35

I think I figured out how to do it

struct Skroll: View {
    
    @State var scrollViewOffset: CGFloat = 0
    @State var start: CGFloat = 0
    
    var body: some View {
        
        VStack(alignment: .trailing) {
            
            HStack {
                
                Image(systemName: "arrowtriangle.right.fill")
                    .font(.system(size: 35).bold())
                    .opacity(-scrollViewOffset > 160.0 ? 1 : 0)
                    .animation(.easeOut, value: scrollViewOffset)
                Spacer()
                
                Image(systemName: "arrowtriangle.left.fill")
                    .font(.system(size: 35))
                    .opacity(-scrollViewOffset > 160.0 ? 0 : 1)
                    .animation(.easeOut, value: scrollViewOffset)
            }
            
            
            ScrollView(.horizontal, showsIndicators: false) {
                
                HStack {
                    Rectangle()
                        .frame(width: 200, height: 300)
                        .cornerRadius(20)
                    Rectangle()
                        .frame(width: 200, height: 300)
                        .cornerRadius(20)
                    Rectangle()
                        .frame(width: 200, height: 300)
                        .cornerRadius(20)
                }
                .overlay(GeometryReader { proxy -> Color in
                    
                    DispatchQueue.main.async {
                        
                        if start == 0 {
                            self.start = proxy.frame(in: .global).minX
                        }
                        
                        let offset = proxy.frame(in: .global).minX
                        self.scrollViewOffset = offset - start
                        
                        print(self.scrollViewOffset)
                    }
                    
                    return Color.clear
                })
                
            }
        }
        .padding()
    }
    
}

result

I replaced my text with an image. I'm not sure if this is the right solution and I don't know if it might cause any errors, but this works for me. Maybe someone will find it useful too

Hide text after scrolling (SwiftUI)

2 Answers2