Website Building » Wix » How Do I Add a Scrollbar in Wix?

How Do I Add a Scrollbar in Wix?

Last updated on January 7, 2023 @ 3:54 am

Adding a scrollbar to your Wix site is a great way to improve the user experience. There are a few different ways to do this, and each has its own benefits.

The first way to add a scrollbar is to use the Wix Editor. This is the easiest way to add a scrollbar, and it requires no HTML or CSS knowledge. Simply click on the “Add” button in the Wix Editor, and then select “Scrollbar” from the list of options.

GREAT NEWS:

Exciting update! We've collaborated with Wix to offer WBI users with a free plan for all website creation needs - Explore the details here.

The second way to add a scrollbar is to use an HTML widget. This method is more flexible, but it does require some basic HTML and CSS knowledge.

To add an HTML widget, simply drag and drop it onto your Wix site. Then, paste the following code into the widget:

<div style="overflow:scroll;">
  Your content goes here!
</div>

Be sure to replace “Your content goes here!” with your own content. You can also adjust the height and width of the widget to control how much of your content is visible at one time.

PRO TIP: If you are planning to add a scrollbar to your Wix website, be aware that there is a potential risk of decreased website performance. Scrollbars can cause issues with website loading times and can make your site appear cluttered and unprofessional. We recommend that you avoid adding scrollbars to your Wix website unless absolutely necessary.

The third way to add a scrollbar is to use a CSS override. This method is the most advanced, but it gives you complete control over the appearance of your scrollbar.

To add a CSS override, simply go to the “Settings” tab in the Wix Editor and click on “Advanced Settings.” Then, paste the following code into the “Custom CSS” box:

::-webkit-scrollbar {
  width: 12px;
/* Set width of scrollbar */
}

/* Track */
  ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
/* Add shadow to track */
  border-radius: 10px;
/* Add rounded corners to track */ }

/* Handle */
  ::-webkit-scrollbar-thumb { border-radius: 10px;
/* Add rounded corners to handle */
  background: #9b59b6;
/* Set background color of handle */ }

  ::selection { background:#f31544; color:#fff; }
/* Change color of selection */
  ::-moz-selection { background:#f31544; color:#fff; }

Be sure to replace “#9b59b6” with your desired color for the scrollbar handle. You can also adjust the width of the scrollbar by changing “12px” to another value.

 

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.