This is something I’ve been getting a lot of questions over. A while back, when apple launched their current site design, I was really amazed by their product browser. Being the curious person that I am, I began coding up my own version with the help of  javascript to skin the scroll bars. Rather than answering all the questions through email, I’ve decided to post everything here on the blog.

Image of the product browser from apple.com

You can see the final product here & download it here.

Explanation

As aforementioned, the original idea, design and images were made by apple. This scrollbar was made possible by the scripts provided at hesid.com. Although it is possible to use jquery to accomplish the same effect, I preferred Flexcroll for several reasons.

Flexcroll v. jScrollPane

1. Size – Flexcroll is significantly smaller and thus requires less bandwidth and loads much faster
2. Simplicity – Although both are downloaded with examples, I found that the examples provided by hesid.com to be more relevant to what I had wanted to accomplish.
3. Documentation – This one is up in the air. Both are document, but i find the Flexcroll documentation to be much easier to follow and understand.

Layout

When you set up your HTML file, you need to set up 4 divs.

1. This div is used to center all the content you have on the page.
2. This second div, is used to as the basis of the product browser. It positions the browser on your page and holds the background
3. Think of this div as the trigger. The div has a class on it which the javascript is looking for. This is the most important div in this structure.
4. This last div holds all the images for the product browser. The div used absolute positioning and z-index to stay on top of the other divs The images are arranged in an unordered list with the background image aligned to the bottom. This is used make sure all the images are lined up properly and that you don’t have worry about making all the images the same size.

That’s it! Make sure you have the proper classes and ID’s on your divs and the javascript should do the rest.

Uses

The most obvious use for this, would be to elegantly display and showcase products as Apple has already done. However, this scrollbar can be used for numerous other applications such as an elegant scrollbar for image galleries or portfolios.

Again, you can see the final product here & download it here.

Legal Mumbo Jumbo

I take no credit for the images used in this example as they were created and are copyrighted by Apple, Inc. I also do not take credit for the scripts that helped make the product browser possible. The script developed by hesid.com is free for personal use (there is a commercial license fee). This download is delivered as is. I will however, be happy to answer any questions you may have.