Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with Scrollbars in HTML

In this article, we will learn about how to work with the scroll bars in a HTML page. Also we will see various methods on how to make them appear or disappear from the web page.

An scroll box is a box that shows scroll bars when it's contents are too large to fit in the box. To create it, you just need to create the box using the HTML div tag. Then, to make the box scroll, you apply the CSS overflow property to that div.

Assuming we don’t have any scrolling attribute that is used, browsers will normally use the “auto” attribute.

The attribute “auto” can be used so as to make the scroll bars suppress in the web page. This is done normally by marking the value of attribute as no, else if the value is set to yes, the spaces has to be reserved for the scroll bars. This is irrespective of whether the content slides off the page or not.

Listing 1: Suppressing the scrollbar

Scrolling auto= no | yes 

This means that when the value is set to yes, you will be able to see the missing content in the pane. When the value is set to no, you may miss out to read some of the content that is present in the pane.

The below lists the code which is useful to distinguish between the header and main frame where we see that header frame will not lead to scroll bars. On the other hand, the main frame will make scroll bars to appear forcefully.

Listing 2: Code to differentiate between header and main frame

<frameset rows="125,*" >
  <frame src="header " frameborder="1"
    resize="resize" scrolling="no"/>
  <frame src="home" frameborder="0" scrolling="yes"/>

The values can be any of the three which is yes, no or auto. All the major browsers support this functionality of creating scrollbars. Example includes version of IE 5.0 and above, Firefox 1.0 and above, Safari 1.3 and above, Opera 9.2 and above & Chrome 2.0. Each and every browser that is listed here supports this attribute.

Now suppose that we want to implement a web page in the full screen mode, it is easy to do that but we might get stuck with still the vertical scrollbar appearing on the right side. So let us understand how to overcome this issue.

You just need to use the below code however this works only in IE.


The alternative is that when you are going to apply for a full screen window, we should also be looking for the normal window option. For the reason that we have the above code designed to work just in IE, we can make use of CSS method that will work in other browsers as well.

Listing 3: Using CSS method to work in different browsers

<style type= “text:css”>
Body {overflow: hidden};

Let us take a look at how we can always make the vertical scrollbars appear and horizontal ones hidden.

Listing 4: Hiding vertical and horizontal scrollbars

<div style="width:288px;height:314px;overflow-x:auto;overflow-y:hidden;">

As long as the content is longer than the specified space, the vertical bar will always be there. On the other hand, if you have the content with a good amount of width, you would need to have the horizontal scroll bar.

The below code will help you to come up with the creation of the vertical scroll bar.

Listing 5: Creation of a vertical scroll bar

select optionsDataSource="{pageFlow.serviceList}" 
 nullable="true" nullableText="Select Number" servicetagId="SvcNo" nullable="true" style="width:150px;"/>

Here the only issue is that we need to come up with a scrollbar in case we get to to see that the optionsDatasource is giving you more than 5 options as an output.

In case we are looking out to hide the horizontal scroll bar on the pages, we can try to play with the code, which is “overflow-x” and obviously it should have the value as “hidden”.

On the other hand, as discussed above, the vertical scrollbar can be displayed making use of the code {“overflow-y: scroll}”

Assume that you do not have a scrollbar present on the web page of yours and your HTML page is small enough to display the content entirely, in that case when you move to the next page, we will see the entire content shifted to the left. A scrollbar is nothing but an object in a web page with the help of which we can see the continuous text or anything that requires scrolling to be viewed it properly.

We can also go ahead and customize the function of the scrollbars that are present on the web page. However this differs from operating systems and we can make use of the CSS directives in case we are looking to change the scrollbar colours as well. Above all, these directives are meant to be supported just by Internet Explorer 5.0 and versions above than that. Opera also supports this and we have the below pseudo-elements that are supported by the webkit-dependent browsers.

::webkit-scrollbar, scrollbar-button, scrollbar-track, webkit-scrollbar-track-piece, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner and ::-webkit-resizer

Sample Output:

Scrollbar example

Figure 1: Scrollbar example

Adding colour on the scrollbars is easy and requires the below code to be implemented on the web page.

Listing 6: Adding colours to the scrollbars

<title>Title of the page</title>
<body bgcolor="#000" text="#ffffff">
<style type="text/css">
body {
scrollbar-face-color: blue;
scrollbar-highlight-color: #ff3; 
scrollbar-3dlight-color: blue;
scrollbar-darkshadow-color: blue;
scrollbar-shadow-color: blue;
scrollbar-arrow-color: #f06;
scrollbar-track-color: blue;

Here are the few things that need to be notice for the above code.

  • We have collapsed the code of the colour. Alterations have been done that actually matches the names of the colours. This is just to ensure that we use them properly and hence it can make more meaning to the HTML page.
  • Also when we want to set the range of the maximum value of the scrollbar, this can be done with the help of the attribute by the name of “max”.

Making use of the “max” attribute meant the same for width of the scrollbar area as well. The purpose of adding the value is to make sure that we are incorporating a sliding speed to a good pace.

Listing 7: Using the max attribute to set the scrollbar range

<!—This is our scrollable element -->
<div id="scrollwrap">
  <div id="scroll">
<!—The range below helps to control the scroll -->
<input type="range" max="2000" step="7" />

The below code will help you to control the sliding of the div element:

Listing 8: Code to control the sliding of the div element

// This is used to manage div which is scrollable
var scroll = $("#scroll");
// Here we will specify the input range
	// We will now slide the div making use of jQuery's css() method
		scroll.css({left: step});
	// This is used to exhibit the progressbar
	progress: true,
	// starting value which also sets the initial scroll position of the div
	value: 100,
	// The below function is triggered at the time of accessing the slider. Here we will animate the div
	change: function(e, i) {
		scroll.animate({left: i}, "pace");
	// This actually makes the scrollbar animation as disabled at the time of playing with the slider
	pace: 0

We can also make use of the javascript to create whatever we have did above. Here we need to put in the block of the script post HTML code. On the other hand, we can also make use of the jQuery's $(document).ready. This is required so as to implement the script the moment webpage's Document Object Model is loaded completely.

At times when we code our website in CSS irrespective of whatever fixes related to the width have been implemented, we can still see that unwanted scrollbar appearing from nowhere. It is not difficult to remove these unwanted scrollbars which though are not harmful however are not required at times and looks dusty. As discussed above, it can be done making use of the hidden value for the variable overflow-x which will make your horizontal scroll bar to hide. Assuming you has a graph with the x and y axis where x axis is the horizontal line and y as a vertical.

We have an overflow-y: which is the vertical scrollbar and overflow-x: as the horizontal scrollbar going across. These codes can be expanded by making use of these codes such as:

  • overflow-x:auto;
  • overflow-x: visible;
  • overflow-x: scroll;

The same goes for overflow-y: property as well. We need to place this code properly and this needs to be done within a specific area of the style sheet of yours.

{overflow-x: hidden;}

We see that this looks to be the simplest technique in order to put the code in the stylsheet and that too within a specific part. Also we can put this in another CSS property. These properties can be body tag and general divs. On the other hand, we need to take care of the thing that while placing the code to the HTML, it is must to define some sort of width, height, position or float.

Listing 9: Placing the code to the HTML

html, body {
margin: 0px;
background-color: #000;
text-color: #ffffff;
padding: 0px;
overflow-x: hidden; }


Here we learnt on how to work with the scrollbars that are present in the HTML page of yours and how we can make them appear or disappear from the web page. Hope this was a useful learning.

I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login