Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add Custom Scrollbar to Any Element in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you have a long sidebar that is breaking your WordPress layout on certain pages? Recently one of our users asked us for a solution. Since the user didn’t want to remove any of the widgets, we suggested adding a fixed height and scroll bar to to all long widgets which fixed the problem. In this article, we will show you how to add a custom scrollbar to any element in WordPress.

Add custom scrollbars to any element in WordPress

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

First thing you need to do is install and activate the Custom Scrollbar plugin. Upon activation simply go to Appearance » Scrollbars to configure the plugin.

Custom Scrollbars settings

You need to start by providing a name for your scrollbar. The plugin allows you to add multiple scrollbars, so adding a name will help you find your custom scrollbar in the admin area.

Next item in the settings is Target Element Selector. This is the class or ID of the web element that you want to target. You can find the id or class of any element by right-clicking on the element in your Chrome browser and selecting inspect element from the menu.

Using inspect element tool to find element ID or CSS class

As you can see in the screenshot, the element we want to target is aside with the CSS class bwp_gallery.

After entering the target selector, you can choose the height and width of the custom scrollbar area. You can also choose the position and a theme for the scrollbar.

Once you are done, simply click on the save changes button to store your settings.

That’s all, you can now visit your website to see the custom scrollbar in action. You can repeat the process to create another custom scrollbar by clicking on the Add button.

Adding another custom scrollbar

We hope this article helped you add custom scrollbars to any element on your WordPress site. You may also want to see our list of 25 most useful WordPress widgets for your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

18 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. alex says

    Hello I cannot seem to get my custom scroll bar to display vertically??? I have it set to a wordpress text widget with the height at 400 px and the width at 100 px and it comes up horizontal which is not what I need. thank you

    • WPBeginner Support says

      Your content may not be tall enough, you may want to reach out to the plugin’s support and they should be able to assist.

      Admin

  3. irit says

    hi
    Thank you for sharing the plugin :)
    i have a very long image that i would like to put a scroll bar on.
    i know i have the right selector since the element does change, unfortunately it just “squishes” to whatever size i put into height (i used Elementor to create that page)
    thank you

    • WPBeginner Support says

      You would want to first reach out to Elementor as their page builder may be preventing the image from going beyond the size of the section you have set up.

      Admin

  4. Danny says

    This is exactly my idea – to use it and make visitors spend more time on my site. My frontpage is such that I can combine several pages. So there is this particular page that is part of my front page, but it is long, so i want to use the scrolling to keep it short yet visitors can scroll just within it.
    My problem is that I dont know the Target Element ID.
    Can you assist?

    • WPBeginner Support says

      If you reach out to your theme’s support for the specific section you want they should be able to let you know the element they’re using.

      Admin

  5. Danny says

    I want to add scrolling on a particular page – the page itself, not the sidebar or any widget.
    What will the Target ELement ID be?
    I right-clicked on the page body, but I dont know what to look out for. Can anybody advice?

    • WPBeginner Support says

      It would depend on the specific theme but normally for what you’re wanting it would be the content area.

      Admin

  6. Alexandre says

    Very nice and easy to custom widget. However, it took me a couple of hours to find what to enter in the Target Element Sector section while using Elementor. It finally worked with the following line: “.elementor-element-6daf57c”. The dot (“.”) at the beginning is important.

    Thank you!

  7. Rushikesh says

    This is working for desktop view, but I don’t want this scrollbar work on mobile devices. Because it’s ruin responsiveness. How can I do it to stop working on mobile devices?

  8. Rosie Malik says

    This tool is such a tremendous help to website appearance and functionality! You can select your featured items (pictures, posts, etc.) and put them almost anywhere … and several times, too! Your site visitor will spend more time on your site and interract with more content, etc. This is a total win/win!

  9. igor Griffiths says

    Thanks for sharing this plugin and more importantly how to set it up, I would never have thought to use the Chrome inspect element to find the target id without many hours of experimentation.

    Looks like a very flexible plugin that with a little imagination could be put to many powerful and engaging uses

    igor

Leave a Reply to WPBeginner Support Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.