jQuery-ScrollShadow a js library for top-edge scrollbox shadows

By <daniel@redwerks.org>

Ever looked at a list of direct messages in Facebook or gone into Google’s account settings and noticed how they handle scrolls? Both sites use a visual technique to cue the user showing them they are not at the top of the scrollable area. They do this using a shadow that disappears when you hit to top of the box (or better yet, in Google’s case it starts to incrementally disappear as you get really close to the top).

I wanted to be able to use this same technique elsewhere so I’ve put together a small jQuery plugin that can do it.

Take a look at this blockquote here. Scroll down a bit and you’ll see the shadow grow into place.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius turpis nisi, hendrerit bibendum nunc. Suspendisse eu cursus ante. In ac ante tortor. Morbi eu augue sapien, sit amet fermentum magna. Maecenas tincidunt rutrum dui id rutrum. Mauris feugiat est adipiscing justo venenatis ac auctor justo blandit. Donec porttitor, magna vel eleifend aliquet, purus purus ornare ipsum, ut accumsan tortor odio sit amet orci.

Vivamus molestie pulvinar ultricies. Ut sapien lorem, sollicitudin vitae convallis vel, faucibus eget est. Sed quam metus, ornare vitae fringilla eu, vehicula eu est. Duis condimentum ullamcorper nunc ac venenatis. Aliquam erat volutpat. Aenean adipiscing gravida sem, vitae venenatis arcu tempus eu. Aliquam erat volutpat. Nulla eget dui id erat ultricies consectetur et at augue. Ut scelerisque lorem lobortis ante rhoncus sollicitudin in nec sapien. Maecenas enim tortor, consectetur ultrices hendrerit nec, lobortis vel neque. Nullam vitae sem eget diam semper egestas ac pellentesque ante. Proin scelerisque aliquet fermentum. Suspendisse potenti. Etiam sed auctor felis. Ut eu varius sem.

Vivamus at porttitor nulla. Curabitur sit amet ante at nisl tristique euismod. In imperdiet interdum pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ornare sapien nec velit vestibulum aliquet. Donec sit amet dolor tellus. Suspendisse quis fermentum turpis. Ut orci ipsum, iaculis ut rutrum dictum, suscipit in ante.

Vivamus nec posuere felis. Maecenas a nisi id enim vestibulum volutpat. Curabitur vehicula nisl eget purus venenatis non condimentum est aliquet. Sed interdum, neque at volutpat adipiscing, eros odio consectetur eros, nec ultrices ligula nibh quis ligula. Integer varius mauris sed erat aliquet varius. Phasellus nibh enim, ultricies ut dignissim vitae, faucibus sed nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vestibulum molestie urna quis vestibulum.

Praesent fringilla eleifend elementum. Nunc eu nulla ipsum, quis volutpat libero. Donec sed odio nisl, sed scelerisque justo. Morbi ac fringilla orci. Aenean eu risus tellus. Aliquam pretium bibendum nunc, nec hendrerit mauris vestibulum et. In ultricies, dolor eu venenatis euismod, metus felis auctor eros, eget consequat felis mi non risus. Suspendisse varius, dui nec fermentum condimentum, tortor lacus adipiscing nisl, vitae vulputate nulla eros gravida ante. Proin elit nisi, sodales gravida interdum sit amet, tincidunt ullamcorper massa. Donec arcu lectus, lacinia ut blandit laoreet, ultrices et sapien. Quisque leo sapien, feugiat id sodales et, tristique eu ligula. Phasellus sollicitudin hendrerit libero ut sollicitudin.

The plugin is up on GitHub for anyone who wants it:
https://github.com/redwerks/jquery-scrollshadow