Fade out top and bottom of an NSScrollView

Question

Is there any way to make the top and bottom edges of an NSScrollView to fade to transparent? I've seen some code/answers that 'fades' it by adding a gradient of a certain color to the subview, basically, covering up the top and bottom with the background color. However, I would like it to actually fade to alpha=0, so you can actually see the contents of the view behind the scroll view. I'm planning my app to have various backgrounds behind this NSScrollView, and without any kind of transition on the borders it looks pretty cheap.

Alex Alex · Accepted Answer · 2016-11-16T09:09:14

Converted a simple iOS implementation from here to work with macOS Swift.

Put this in your NSScrollView subclass:

let fadePercentage: Float = 0.05

override func layout() {

    super.layout()

    let transparent = NSColor.clear.cgColor
    let opaque = NSColor.controlDarkShadowColor.cgColor

    let maskLayer = CALayer()
    maskLayer.frame = self.bounds

    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = NSMakeRect(self.bounds.origin.x, 0, self.bounds.size.width, self.bounds.size.height)
    gradientLayer.colors = [transparent, opaque, opaque, transparent]
    gradientLayer.locations = [0, NSNumber(value: fadePercentage), NSNumber(value: 1 - fadePercentage), 1]

    maskLayer.addSublayer(gradientLayer)
    self.layer?.mask = maskLayer

}

Fade out top and bottom of an NSScrollView

2 Answers