Part 10 – Create Horizontal scroll bar | Make Desktop First Responsive Portfolio Website


Hi! my name is Bibek and in this session
I’m going to show you how to create horizontal scrollbar using jQuery. First of
all let’s have a quick look at the demo. When you scroll down
you can see red bar is scrolling towards right side. As you finish scrolling scroll bar at the
bottom, custom scroll bar reaches towards right. Custom scroll bar reaches left or right
depending on scroll bar you scroll. Now let’s start it using HTML. Just after the end of

tag, add this
HTML code. .scrollbarHolder will be parent div where
I’ll be adding a gray background. Like this one. .scrollBar will be child div where the
red scrollbar will be scrolled. Like this one. When the page first load I want that
bar to be empty so I have added width as 0. Now let’s add some CSS. As said earlier this will be the parent
div with gray background and since I want this to be at the bottom of the
page I have added position: fixed. You can adjust the height
depending on how big or small you want that scrollbar to be. Now
let’s look at the preview. You can see the gray background over
here. This is the actual scrollbar that will
be scrolled. At the moment I have red background, If you want different color
feel free to change it. We can’t see scrollbar at the moment
without adding JQuery. So let’s add them now. First let’s add function called scrollIndicator(). Then we will call this function when
scroll event occurs or whenever we scroll the page. Now let’s use scrollTop() method to
know vertical scrollbar position and add it in a variable. Then we need height which will be the
difference of document height and window height. Document height means whole document
height I’ll show you in the template.
So it will start from header to footer. Then window height means height from top
to bottom which is visible in window. In this example height from header to end of
about me block. Then we need Scroll value in percentage so let’s do some
calculation. It should be windowScroll divided by height and multiplied by 100. Finally update the dynamic width of
scrollbar div using CSS method in jQuery. It means this value will keep on
changing whenever we scroll up or down. Let’s have a preview. Great!! it seems to be working now. Feel
free to comment below if you got any questions. Also don’t forget to like and
subscribe my channel to get more tutorials in the future. This is the end
of this session. In the next session I will show you how to add smooth
scroll navigation using jQuery. Thank you.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *