Remove ScrollView Gradient Fade on bottom when reached bottom

Question

I have an UIScrollView which has a fade-out bottom gradient layer (like in below screeshot). I want to remove it when reached to bottom of UIScrollView. I found below posts but nothing worked for me.

https://stablekernel.com/how-to-fade-out-content-using-gradients-in-ios/

Fade edges of UITableView

let gradient = CAGradientLayer()
gradient.frame = myTextView.bounds
gradient.colors = [UIColor.clear.cgColor, UIColor.black.cgColor, UIColor.black.cgColor, UIColor.clear.cgColor]
gradient.locations = [0, 0.0, 0.7, 1]
myTextView.layer.mask = gradient

override func layoutSubviews() {
    gradient.frame = kvkkTextView.bounds
}

When I try to change the frame of gradient in

private func updateGradientFrame() {
gradient.frame = CGRect(
    x: 0,
    y: kvkkTextView.contentOffset.y,
    width: kvkkTextView.bounds.width,
    height: kvkkTextView.bounds.height
)
}

It causes a weird bug. When I scroll it, texts seen on screen slowly (When I fastly scroll it, screen seen blank and then text appears).

Sateesh Yemireddi · Accepted Answer · 2019-01-08T06:06:43.050

2

Try this

func scrollViewDidScroll(_ scrollView: UIScrollView) {

    updateGradientFrame()

    //On the scroll view content is over means there is no content anymore then hide the mask
    if scrollView.contentOffset.y >= scrollView.contentSize.height - scrollView.bounds.height {

        label.layer.mask = nil
    } else {

        //Else show the mask of UILabel
        label.layer.mask = gradient
    }
}

Update:

private func updateGradientFrame() {
    gradient.frame = CGRect(
        x: 0,
        y: scrollView.contentOffset.y,
        width: scrollView.bounds.width,
        height: scrollView.bounds.height
        )
}

GitHub Url: https://github.com/sateeshyegireddi/GradientScrollViewDemo

edited Jan 08 '19 at 06:06

answered Jan 07 '19 at 12:37

Sateesh Yemireddi

4,289
1
20
37

I've full source code for the tutorial above. If you want it I can send you, @Emre Önder. – Sateesh Yemireddi Jan 07 '19 at 12:38
Can you please share updateGradientFrame() too? Because everything is going on updateGradientFrame() – Emre Önder Jan 07 '19 at 13:42
I saw this answer from different posts earlier but this causes a weird bug. Texts comes later after scroll – Emre Önder Jan 07 '19 at 13:47
Is kvkkTextView is UILabel or UITextView? It should be UILabel. – Sateesh Yemireddi Jan 07 '19 at 13:55
It is a UITextView. How can I scroll with UILabel? – Emre Önder Jan 08 '19 at 06:03
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186337/discussion-between-sateesh-and-emre-onder). – Sateesh Yemireddi Jan 08 '19 at 06:05

Remove ScrollView Gradient Fade on bottom when reached bottom

1 Answers1