When buying products or services on our site, we often receive affiliate commissions that support our efforts. Learn More

How to Add Scrollbar to Any Div or Element

custom scrollbar

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%;
    }

 

Example:  A scrollbar was added to the image below using the overflow properties with a height of 400px, a width of 100% while displaying just the vertical scroll.
long image

 

 

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.

Dummy text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

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.

Dummy text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Donec ultrices tincidunt arcu non sodales neque sodales. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis.
Nec nam aliquam sem et tortor consequat id porta nibh. Nulla aliquet porttitor lacus luctus.
Leo in vitae turpis massa sed elementum tempus. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet.

 

 

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;
    }

 

Example:  The webkit-scrollbar pseudo elements were used to add some color to the scrollbar – the track was set to orange and the thumb was set to blue.  The width was set to 15px and border-radius property was also added just to soften up the sharp edges.
long image

 

 

 

 

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.

custom content scrollbar

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.

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 in your page.  

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:

scrollbar shortcode

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.

 

You May Also Like

Leave a Reply

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