I found it strange that the generic Scroller control didn't have scroll fades; instead you have to use FadeScroller.  Even more troublesome, if you wanted fades on a SnapScroller, for example, the framework didn't provide for that.  The solution is easy fortunately (particularly when you steal the code from FadeScroller!).[[MORE]]

The code use is directly adapted from FadeScroller.  I had some issues copying it verbatim but the effect is the same.  There are two steps to getting fades working.

First, you need to create an instance of the ScrollFades kind.  I at first tried adding it as a child of Scroller but the fades wouldn't position correctly.  The cause was that as a child of the scroller client (inner wrapper), the fade would get scroller along with the other content.  The fades really needed to be siblings of the client so creating them as chrome rather than normal components did the trick (More on chrome in a future post).

Below, I'm creating the ScrollFades component as chrome of the SnapScroller(createChrome = createcomponent with isChrome=true).

create:function() {
    this.inherited(arguments);
    this.$.scroller.createComponent({kind:"ScrollFades", name:"fades", isChrome:true, owner:this});
},

Second, I hook scroll events for the Scroller to the showHideFades method of ScrollFades.  The ScrollFades component takes care of determine which fades to show based on the position of the scroller.

// in the components block ...
{kind:"SnapScroller", vertical:false, height:"100px", name:"scroller", onScroll:"scrolled", components:[ /* components */}

// later on ...
scrolled:function(sender) {
    this.$.fades.showHideFades(this.$.scroller);
}

And that's it!  If you're looking for some homework, make this into a custom FadeSnapScroller control that encapsulates the fades.  Here's the complete example:

var _Example = {
    name:"com.technisode.example.App",
    kind:"Control",
    components:[
        {kind:"SnapScroller", vertical:false, height:"100px", name:"scroller", onScroll:"scrolled", components:[
                {content:"Button 1", style:"margin:10px"},
                {content:"Button 2", style:"margin:10px"},
                {content:"Button 3", style:"margin:10px"},
                {content:"Button 4", style:"margin:10px"},
                {content:"Button 5", style:"margin:10px"},
                {content:"Button 6", style:"margin:10px"},
                {content:"Button 7", style:"margin:10px"},
                {content:"Button 8", style:"margin:10px"},
                {content:"Button 9", style:"margin:10px"},
                {content:"Button 10", style:"margin:10px"},
                {content:"Button 11", style:"margin:10px"},
                {content:"Button 12", style:"margin:10px"},
                {content:"Button 13", style:"margin:10px"},
                {content:"Button 14", style:"margin:10px"},
                {content:"Button 15", style:"margin:10px"},
        ]}
    ],
    create:function() {
        this.inherited(arguments);
        this.$.scroller.createComponent({kind:"ScrollFades", name:"fades", isChrome:true, owner:this});
    },
    scrolled:function(sender) {
        this.$.fades.showHideFades(this.$.scroller);
    }
}

enyo.kind(_Example);