![]() ![]() This in return could lead to undesirable results and inconsistencies for your design. However, operating systems like Windows, OS X and Linux have their own style for the scrollbar. The CSS way of customizing scrollbars is simple, but looks a bit rough. Terminologies associated with scrollbars.Custom scrollbars are exposed behind the -webkit vendor prefix.There are tons of jQuery plugins that can help with customizing scrollbar.You will find them in major websites and blogs, especially personal portfolio websites. Customized scrollbars aren’t uncommon anymore.Styles.css #style-1::-webkit-scrollbar-track Now that you are familiar with the terminologies, let’s start! Setting Up the Projectįirst, create index.html and style.css files, and open the current directory with your code editor. ::-webkit-resizer the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements.::-webkit-scrollbar-corner the bottom corner of the scrollable element, where two scrollbar meet.::-webkit-scrollbar-thumb the draggable scrolling element resizes depending on the size of the scrollable element.::-webkit-scrollbar-track-piece the top-most layer of the the progress bar not covered by the thumb.::-webkit-scrollbar-track the empty space “below” the progress bar. ![]() ::-webkit-scrollbar-button the directional buttons on the scrollbar.::-webkit-scrollbar the background of the bar itself.webkit-scrollbar consists of seven different pseudo-elements, and together comprise a full scrollbar UI element: Understanding Scrollbar TerminologiesĬustom scrollbars are exposed behind the -webkit vendor prefix for use in browsers using the Webkit (and Blink) rendering engine. If you are a designer, photographer or you just want your website to have a cool scrollbar, go ahead with the jQuery plugins. However, there are jQuery plugins that can help with customizing scrollbar, but I do not like to add more JavaScript to my website. In this tutorial we will be using CSS3, which is the most straightforward way. There are basically a few ways to implement a custom scrollbar. First we will style our scrollbar give it a width and height and then let’s use the following pseudo elements of webkit to customize the look of our scrollbar.Custom scrollbars are getting popular, and you might have come across websites that have unique scrollbars, making the sites feel and look different. To apply this on our CSS let’s use the following code. Webkit has introduced these pseudo elements to customize the scrollbars. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ![]() Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Let’s also wrap our content in a class content. To start our demo for the CSS version of our customize scrollbar let’s put a basic markup and wrap them with a class scrollbar and an id of css_version. View Demo Resources required to complete this tutorial In today’s tutorial, I am going to show you how to customize your scrollbars using CSS3 and jQuery. Webkit now supports styling of the scrollbars in overflow sections, drop-down, menus and text areas. That’s being said, it is now much easier to do it using HTML5 and CSS3. Looking back in the day where IE 5.5, the Internet Explorer team introduced a set of non-standard CSS properties that allows users to customize scrollbars using the scrollbar-base-color from which you can use to make elements scroll. Using textarea and iframe tags this can be done easily however with the new HTML5 and CSS3 capabilities it can now be done using the div tag. Scrollable elements of web-pages have become popular since the early development of the web.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |