How to Add Scrollbar to Any Div or Element

Do you have a long element, such as an image or text box, on your web page that you don’t want taking up the entire screen?

Having too many elongated images or text on a single web page will require excessive scrolling which can take away from the user experience of your visitors.

The easiest way to solve this problem is to add a scrollbar to the div within the page.

A scrollbar can easily be added to any div or element with the use the Overflow CSS property in any HTML or WordPress site.  Moreover, WordPress users also have an alternate solution with the use of a custom scrollbar plugin.

The Overflow CSS property or a custom scrollbar plugin will let you add vertical and horizontal scrollbars to various elements or divs such as images, text boxes, tables, etc.

This gives users the option to scroll through an element and interact with it only if they’re interested in that specific content.

ADD SCROLLBAR TO DIV IN HTML USING CSS

The examples below will show how to add scrollbars using only HTML and CSS.  For WordPress websites, editing the HTML is available through the Edit as HTML option from the 3 dot settings button from the top right corner of a Block.

Wrap the element you want to add a scrollbar to in a div tag within the HTML.  In the example below, we are using an image element.  Assign a class or an id to the div and name it whatever you’d like (i.e. scroll-img).


<div class="scroll-img">
<img src="long-image.jpg">
</div>


ADD VERTICAL SCROLLBAR ON SIDE

Here are a few ways to add a vertical scrollbar to an element or a div.  Either method will work.

• • overflow: auto
• Using auto as the value with the overflow property will automatically display the scrollbar when content is cut off.
  
.scroll-img {
  overflow: auto;
  height: 400px;
  width: 100%;
}

• • overflow-y:  scroll
• Using scroll as the value with the overflow-y property will always display a scrollbar regardless of whether a content is cut off or not.
  
.scroll-img {
  overflow-y: scroll;
  height: 400px;
  width: 100%;
}


ADD HORIZONTAL SCROLLBAR ON BOTTOM

Here is a way to add the horizontal scrollbar to an element or a div using the hidden value.  Horizontal scroll can be useful for elements such as a table or displaying data from an excel sheet.

• • overflow-x: scroll
• • overflow-y: hidden
• Using scroll as the value with the overflow-x property will display a scrollbar vertically and horizontally.  To display the scrollbar only horizontally on the bottom, simply use the hidden value for the overflow-y property.
  
.scroll-img {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: 50px;
}

Example:  The dummy text below uses the overflow-x property with the value of scroll with an overflow-y property with the value of hidden.  White-space property with the nowrap value was also used to prevent the text from wrapping to the next line to demonstrate the horizontal scroll.

ADD BOTH VERTICAL AND HORIZONTAL SCROLLBAR

Setting both the vertical and horizontal scrollbar to a div or an element is straightforward.

• • overflow: scroll
• Simply using the overflow property with the value of scroll will add a scrollbar to the bottom and the right.
  
.scroll-img {
  overflow: scroll;
  white-space: nowrap;
  height: 50px;
}

Example:  The dummy text below uses a single overflow property with the value of scroll.  Once again, white-space property with the nowrap value was also used but sentences were broken up with the HTML <br> tag to demonstrate both the vertical and horizontal scroll.

STYLE SCROLLBAR WITH CSS

If you don’t like the default look of a scrollbar, it’s easy to style it with the CSS pseudo element,  webkit-scrollbar.  For sake of consistency, we’ll use the same CSS rules from the vertical scrollbar example above.

.scroll-img {
  overflow-y: scroll;
  height: 400px;
  width: 100%;
}

You just need to attach following pseudo elements to the same class above to style it in CSS.

• • ::-webkit-scrollbar (used to style the scrollbar)
• • ::-webkit-scrollbar-track (used to style the track)
• • ::-webkit-scrollbar-thumb (used to style the thumb)
  
.scroll-img::-webkit-scrollbar {
  width: 15px;
}
 
.scroll-img::-webkit-scrollbar-track {
  background: orange;
  border-radius: 10px;
}
 
.scroll-img::-webkit-scrollbar-thumb {
  background: blue;
  border-radius: 10px;
}

ADD SCROLLBAR TO AN ELEMENT WITH A PLUGIN

For WordPress sites, if you prefer not to work with code, the alternate solution for adding a scrollbar to an element or div is to install a plugin.

Go to your plugin marketplace from your WordPress admin dashboard and search for Custom Content Scrollbar by SoftHopper.

After installing the plugin, you can configure it by navigating to Settings  >>  SH Scrollbar Options or you can do it right from the post or page.  A lot of the settings are styling options that are also available by clicking the Custom Content Scrollbar button from the top of the blog post.

From the post or page you are editing, click the button as shown above and you’ll see options for inserting a scrollbar to an element or div in your page.  The process involves inserting a shortcode.

All the settings aren’t required but to generate a shortcode, select the Scrollbar Theme, Set Width, Set Height and Show Scrollbar.  After inserting the shortcode for the scrollbar, it should look something like this:

Replace the blue highlighted field with the content you want to add a scrollbar to (i.e. image, text).  You can also edit the options such as the width, height, etc. from here as well.

In the example above, the width was changed to show a percentage instead of pixels because the option wasn’t available from settings.

One benefit of using this plugin is the styling options available out of the box to dress up the scrollbar.  Coding isn’t required so it’s just a matter of which design you decide to use.

SUMMARY

Adding a custom scrollbar to a div or an element can be useful when you don’t want long content to take up excessive space within a web page.

Plugins make it a bit easier if your site is built with WordPress but for non WordPress sites, it is just as easy with just a little bit of HTML and CSS code.