Mobile web applications and some more advanced layouts are commonly seen using internal scroll bars. These are custom-made scroll features which are nested inside another container on the page. I feel these have become more popular since the rise of dynamic content and the popularity of jQuery plugins. Keep in mind that most webpages still need to display a full scrollbar, however this option allows greater functionality within the interface design.
For this tutorial I want to demonstrate how we can build internal content scrollbars using jQuery. More specifically we can use the Tiny Scrollbar plugin which is free to use on any open source projects. The plugin is in release version 1.8 as of writing this tutorial and I can notice a lot of great features within the syntax. Check out my example demo below to see what we will be coding.
Live Demo – Download Source Code
Building the HTML
First we need to start off by downloading a copy of the Tiny Scrollbar plugin, along with a local copy of the jQuery library. Notice the Tiny Scrollbar zip contains a small number of CSS classes along with some internal images. These make up the overall condition of the scroll bar which is styled very similar to Mac OSX.
<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery Inner Content Scrollbars</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://spyrestudios.com/favicon.ico"> <link rel="icon" href="http://spyrestudios.com/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="styles.css"> <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700"> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script> </head>
All of the default page styles along with the plugin styles are contained within my core CSS file. You may notice I am also using a unique Google Web Font named Roboto Slab. This gives the page a more custom feeling to the design elements.
Inside the HTML we need to setup a very strict container element. Later in the JavaScript codes we will need to use the outer container as the main jQuery selector object. The ID name should not matter in any case, just be sure to make them consistent between your HTML and JS codes. Here is my sample body content with the added scrollbar design.
<div id="scrollbox1"> <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div> <div class="viewport"> <div class="overview"> <h2>It's Arrested Development.</h2> <p>If you're suggesting I play favorites, you're wrong. I love all of my children equally. I don't care for Gob. It's so watery. And yet there's a smack of ham to it. Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. What is she doing at a beauty pageant? Is she running the lights or something? Let's make Ann the backup, okay? Very good way to think about her, as a backup.</p> <p><img src="images/arrested-photo-s04-preview.jpg" width="680" height="378" alt="arrested development season 4 preview screenshot"></p> <p><strong>NOTE:</strong> Remember to include width/height attributes for all images.</p> </div> </div> </div><!-- @end #scrollbox1 -->
I have removed a good deal of the text content since this takes up a lot of space. But I specifically wanted to include the image so you can see that each piece of media will require a width and height attribute. Otherwise the scrollbar cannot adjust for the proper height and some of your box will be cut off from the bottom. The div #scrollbox1 can be renamed to anything which will act as an outer container for the scrolling div.
Take note of the content section using classes .scrollbar, .track, and .thumb. These are necessary to get the original look & feel out of the Tiny Scrollbar plugin. And even aside from the CSS styles you will still need these exact elements using the same class names for the scrollbar functionality to display at all! Thankfully this template is very easy to replicate so you should not have any problems after following this demo tutorial.
Styling with CSS
My document is still using many of the core CSS resets common within all my tutorials. Eric Meyers has a great collection of resets which I have based many of these sample codes around. Although there are not many required CSS properties for this plugin, there are some that we need to consider. And using the default CSS resets will help to keep the webpage displaying properly.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body {
background: #f4f4f4 url('images/pw_pattern.png'); /* PW Pattern http://subtlepatterns.com/pw-pattern/ */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #262626;
padding-top: 40px;
padding-bottom: 65px;
}
br { display: block; line-height: 2.2em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
hr { border: none; background-color: #ccc; color: #ccc; height: 1px; margin-bottom: 10px; }
/* typography */
h1 {
font-family: 'Roboto Slab', 'Helvetica Neue', Verdana, sans-serif;
font-size: 3.2em;
line-height: 1.5em;
text-align: center;
margin-bottom: 15px;
color: #666;
}
h2 {
font-family: 'Roboto Slab', 'Helvetica Neue', Verdana, sans-serif;
display: inline-block;
font-size: 2.55em;
line-height: 1.4em;
margin-bottom: 5px;
color: #43455e;
border-bottom: 1px dashed #43455e;
}
p {
font-size: 1.45em;
line-height: 1.4em;
color: #343434;
margin-bottom: 10px;
}
a { color: #464c83; }
a:hover { color: #545db2; }
I have defined all of the typical font styles using headings and paragraphs. I also setup a basic horizontal rule within the content and I’ve defined these styles within the resets. In fact, the only majorly customized element I have used is #wrapper which contains the entire page centered in the layout. But these styles are so basic and common that you can find them in any similar tutorial – or just download a copy of my source code to see it for yourself.
/* jquery scrollbar styles */
#scrollbox1 { width: 775px; margin: 10px 0 10px; }
#scrollbox1 .viewport { width: 720px; height: 260px; overflow: hidden; position: relative; }
#scrollbox1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#scrollbox1 .scrollbar{
background: transparent url('images/bg-scrollbar-track-y.png') no-repeat 0 0;
position: relative;
background-position: 0 0;
float: right;
width: 15px;
}
#scrollbox1 .track {
background: transparent url('images/bg-scrollbar-trackend-y.png') no-repeat 0 100%;
height: 100%;
width:13px;
position: relative;
padding: 0 1px;
}
#scrollbox1 .thumb {
background: transparent url('images/bg-scrollbar-thumb-y.png') no-repeat 50% 100%;
height: 20px;
width: 25px;
cursor: pointer;
overflow: hidden;
position: absolute;
top: 0;
left: -5px;
}
#scrollbox1 .thumb .end {
background: transparent url('images/bg-scrollbar-thumb-y.png') no-repeat 50% 0;
overflow: hidden;
height: 5px;
width: 25px;
}
#scrollbox1 .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
At the very bottom of the stylesheet you will find these default Tiny Scrollbar properties. You may notice the different classes are using background images and the directory is relative towards where you stylesheet is located. The .viewport and .overview classes are very important to the internal structure of each scrolling box. Copy this block into your own project and your scrollbars should look exactly the same(with the same images too).
Ensure that your new HTML on each project will mirror this formatting. The only div ID which should be changed is the very outermost container which in my case is #scrollbox1. You should update this in the Tiny Scrollbar CSS codes to match all of your related page boxes. It may even be easier to use a class name so you can rapidly duplicate the effect.
Generating a Scrollbar
This jQuery plugin is yet another great example of JS minimalism. You really only need a single line of code to get this plugin working on all your scroll boxes. I have setup a tiny anchor link which also demonstrates how to jump down the scrollbox to different areas in the content. This process is much easier than you would think, and it just requires a pixel value where the anchor should stop.
$(function(){
$('#scrollbox1').tinyscrollbar();
// create the anchor jump effect
$('#photojump').on('click', function(e){
e.preventDefault();
$('#scrollbox1').tinyscrollbar_update(230);
});
});
The only line required for this to work is $(‘#scrollbox1’).tinyscrollbar(). The function does handle some parameters but you honestly do not need any of them. Read up on the plugin’s main website if you want to learn a bit more. The ID #photojump is used on an anchor link beneath the scrollbox which will trigger whenever a user clicks.
This will automatically stop the HREF value from loading and call another method tinyscrollbar_update(). The only parameter we pass into this function is a number of pixels for how far down the scrollbox should jump. Obviously there are many other internal functions we can use similar to this one. And the power of Tiny Scrollbar can be achieved with some light jQuery coding. This is one of the few plugins which still receives updates and works right out-of-the-box just as you would expect.
Live Demo – Download Source Code
Final Thoughts
Internal scrollbars will have a purpose for creating stylish web applications. You should always consider this method as a possible solution no matter what technologies you are using. I have found a great level of compatibility with the Tiny Scrollbar plugin which you may not find elsewhere. But it is certainly worth checking out some of the alternatives so you can have an idea of what else is out there. If you have questions or ideas on the tutorial please share with us in the post discussion area below.
The post Building Internal Content Scrollbars using jQuery appeared first on SpyreStudios.
