Blog

How to Add Custom Scrollbar to Any Element in WordPress wp lifetime webs



Do you have a long sidebar that causes issues on certain pages? There is a way to add a scrollbar to almost any element in WordPress. In this video, we will show you how to add a custom scrollbar to any element.

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Text version of this tutorial:
http://www.wpbeginner.com/plugins/how-to-add-custom-scrollbar-to-any-element-in-wordpress/

Check us out on Facebook:
https://www.facebook.com/wpbeginner

Follow us on Twitter:
http://twitter.com/wpbeginner

Join our circle on Google+:
https://plus.google.com/+wpbeginner/

Checkout our website for more WordPress Tutorials
http://www.wpbeginner.com/

Summary of this Tutorial:

Start by installing and activating the custom scrollbar plugin.

Then go to Appearance, Scrollbars to configure.

You need to give it a name and add the name of the target element selector.

Use something like inspect element on chrome browser to find the information.

Hover over the area you want the scroll for and right click on the page and click inspect element.

Find the id and copy it to add it to your scrollbar then save the settings.

Related Links:

Custom Scrollbar

https://wordpress.org/plugins/custom-scrollbar/

source

10 Comments

  • Soundfeet Marketing on March 8, 2017

    I like it. However I do not like the style of the scroll bar since its thin and nearly transparent. Is there a way to easily change the style to the default style?

  • Robo on October 27, 2017

    WOW! You just solved my problem and saved me a tun of time…
    Subbed.

  • abubakar mohammed on May 14, 2018

    Wtf, you say I'd copy and paste, done, idk Wtf u explained

  • Ani B on January 21, 2019

    I watched it 15 times, too brief, not enough information.  more confused now than before!

  • likithsai surya on August 12, 2019

    can you tell me how to write the code for a specific widget in the widget area

  • ras1950 on November 2, 2019

    I have yet to get the scrollbar to work. Exactly what is being copied during the inspect element process and then inserted into the field?

  • Likith Sai Surya Pasupuleti on February 7, 2020

    There is no aside and ID on my page.WHat should i do

  • Gee Gee on May 13, 2020

    What do we copy and paste?

  • Ananda Namaste on January 24, 2021

    My Widget does not have an id… only a class. Does this make the plugin unusable?

  • Sable Wolf- on April 4, 2021

    do you know how to remove/hide the scrollbar on a chromebook?

WhatsApp us
Live Chat

Office hours operation Mon-Sun 8:00 am ET – 4:00 pm ET

To start your Premium WP or Cpanel service, use our domain search engine, if the domain you want is available, contact us by Whats app to activate your project.

The easiest, fastest, and most secure way to communicate with us.
loading
Please enter your domain.
Please verify that you are not a robot.

Terms Privacy

 

 

WEBFI NETWORK OFFICE HOURS 

Mon-Sun from 8:00 am /4:00 pm USA-ET

WhatsApp us

Small Business – WordPress – CPanel – Hosting

© Webfinet Affordable Private Small Business Solutions All Rights Reserved 2021 - Powered By Marquez.Group
error: WEBFINET SECURITY IS ON