jQuery is something that helps web developers and designers achieve a lot of difficult tasks easily. Today, in this tutorial, I am going to teach you how to create a custom content scroller on your webpage. Have you ever faced a problem when you need to set a maximum height or width for an element on your webpage, but you are cautious that it may hide the actual content? Well, in such a scenario, a custom content scroller can be used, which enables the user to scroll through the content of an element in case it does not fit the screen. It will not scroll the entire webpage, but will just scroll that specific element. Before we begin, have a look at the demo and download the source code if you want.
DEMO | DOWNLOAD
Well, let’s get started with the tutorial directly. In this tutorial, I would create a new webpage, which will contain a box in the center that will contain my dummy text. And then, we will set a custom scroller in vertical and horizontal direction one by one. Remember that only one type of scroller, vertical or horizontal can be set to an element on our webpage using the plugin that we are going to use.
Read other interesting articles:
- Notepad++ as an alternative to regular Notepad
- jQuery Full Page Loading Animation
- jQuery Background Image Slideshow
- Stylish jQuery Popup
jQuery Custom Content Scroller
For this tutorial, I am going to make use of a plugin by Malihu, which you need to download that from the following link. Then, extract it on your computer and we will need to do use these files to complete the effect on our website for a custom content scroller.
HTML Part
The HTML part for this mock-up is really simple. I will just create a div element in the body of the page, which will contain the Lorem Ipsum text with a nice rounded box around it. Also, I will include the necessary CSS and JavaScript files in the header of the page. Remember, you can also include the JavaScript files just before closing the body tag, and it would help you in providing better performance for your webpage. I have saved this file as index.html in a folder on my computer.
<html> <head> <title>HTML Content Scrollbar using jQuery</title> <link href="style.css" rel="stylesheet" /> <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.mCustomScrollbar.js"></script> </head> <body> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet luctus nisl. Aenean id pharetra metus. Nullam nec mauris vel tellus facilisis posuere ut quis magna. Morbi ac dui eget orci congue bibendum nec vitae nibh. Ut tristique turpis ipsum, eleifend condimentum lorem lacinia in. Mauris ullamcorper posuere eleifend. Etiam rutrum tellus dolor, mattis scelerisque tellus convallis nec. Vestibulum semper neque odio, id pulvinar lacus porttitor eget. Morbi condimentum molestie accumsan. Nulla consequat dignissim nisi, et sodales felis ultricies at. Vivamus a faucibus dui. Proin nibh erat, pellentesque sit amet turpis quis, laoreet aliquam nisi.Ut in bibendum leo. Donec fringilla, libero ut dignissim ultricies, mi sapien scelerisque est, id tempus turpis nulla sed enim. Donec quis magna nisl. In cursus, arcu quis posuere dictum, magna dolor dignissim sem, at varius diam orci ut orci. Aliquam erat volutpat. Morbi purus sapien, mattis vel arcu sit amet, lacinia sagittis sem. Nullam imperdiet augue ut risus blandit pretium. Integer ac elit facilisis, vestibulum justo vel, adipiscing lorem. Fusce luctus imperdiet semper. Etiam nibh arcu, lobortis a dignissim eget, congue quis ligula. Integer rhoncus vehicula sem in eleifend. Etiam eu erat eu eros sollicitudin condimentum. Nullam non pharetra quam. Fusce id euismod diam. Praesent auctor scelerisque ante, quis euismod diam. Pellentesque tincidunt sapien eget quam sagittis auctor.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras scelerisque aliquam neque, tincidunt posuere elit. Praesent auctor justo in semper rhoncus. Praesent mattis rhoncus diam et fringilla. Morbi condimentum fringilla tellus, ut iaculis urna lacinia non. Curabitur odio elit, pretium id facilisis eget, vestibulum eu nisl. Donec vitae porta mauris, a commodo arcu. Aenean gravida id velit id placerat. Aenean euismod augue at diam fermentum, vitae placerat libero rutrum. Morbi adipiscing fermentum lacus non lacinia. Nunc euismod non urna ut molestie.</p> </div> </body> </html>
The CSS Part
In the CSS Part, that is the style.css file, we need to basically specify the styling for our div element. Just make sure that you specify a width to the div element if you want a horizontal scroll bar, or specify the height if you want a vertical scroller, but I prefer specifying both these items and centring my element to the webpage. Here is the code that you need to put in the style.css file, placed in the same folder as the index.html file.
#content{
position:relative;
width:500px;
height:370px;
overflow:hidden;
border-radius:10px;
padding:10px;
margin:100px auto;
display:block;
text-align:justify;
background:rgba(0,0,0,0.3);
color:#FFFFFF;
}
The JavaScript Part
The JavaScript part basically consists of specifying the element on your webpage that would contain the custom scroller, and then execute the custom scroller function for that element. Here is the code that you need to put just before closing your body tag.
<script>
(function($){
$("#content").mCustomScrollbar({
theme:"dark"
});
})(jQuery);
</script>
Note that I have specified the theme as dark for my scroller. You may change it to light, and you can also specify various other properties in there. For instance, if you want a horizontal scroller with dark theme, you may change the script part as follows.
<script>
(function($){
$("#content").mCustomScrollbar({
theme:"dark",
horizontalScroll:true
});
})(jQuery);
</script>
To know all the properties that you can change here, head over to the official plugin page.
Well, that’s all for this tutorial. I hope this tutorial helped you create a custom jQuery scroller for your upcoming project, or wherever you used it. Keep subscribed to Slash Coding to for more and more such tutorials that you can implement yourself on your website, and as always you may contact me using the comments below or the contact page in case you face any problem. Don’t forget to subscribe to Slash Coding for latest post updates via RSS Feeds, Facebook, Google+ or Twitter.
