Make custom scrollbar for your website

Surely your website will stand out more if the scrollbars are customized. They can help portray key design aspects of a website, whether it's a particular color or a particular style.

In this article, I will use SimpleBar plugin to replace the browser's default scrollbar with a custom styled.

Demo SimpleBar

First, you need to put this code inside the <head> tag:

<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css"
/>
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>

Notice: You can download and replace the link for use on local website.

For sites that use the Joomla source code, you can add it from the template's settings or using the Custom HTML module.

In case of using Custom HTML Module, skip the <link> tag and insert the entire CSS below:

[data-simplebar] {
  position: relative;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.simplebar-wrapper {
  overflow: hidden;
  width: inherit;
  height: inherit;
  max-width: inherit;
  max-height: inherit;
}

.simplebar-mask {
  direction: inherit;
  position: absolute;
  overflow: hidden;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: auto !important;
  height: auto !important;
  z-index: 0;
}

.simplebar-offset {
  direction: inherit !important;
  box-sizing: inherit !important;
  resize: none !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

.simplebar-content-wrapper {
  direction: inherit;
  box-sizing: border-box !important;
  position: relative;
  display: block;
  height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
  width: auto;
  max-width: 100%; /* Not required for horizontal scroll to trigger */
  max-height: 100%; /* Needed for vertical scroll to trigger */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.simplebar-content:before,
.simplebar-content:after {
  content: ' ';
  display: table;
}

.simplebar-placeholder {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  pointer-events: none;
}

.simplebar-height-auto-observer-wrapper {
  box-sizing: inherit !important;
  height: 100%;
  width: 100%;
  max-width: 1px;
  position: relative;
  float: left;
  max-height: 1px;
  overflow: hidden;
  z-index: -1;
  padding: 0;
  margin: 0;
  pointer-events: none;
  flex-grow: inherit;
  flex-shrink: 0;
  flex-basis: 0;
}

.simplebar-height-auto-observer {
  box-sizing: inherit;
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 1000%;
  width: 1000%;
  min-height: 1px;
  min-width: 1px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.simplebar-track {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

[data-simplebar].simplebar-dragging .simplebar-content {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

[data-simplebar].simplebar-dragging .simplebar-track {
  pointer-events: all;
}

.simplebar-scrollbar {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 10px;
}

.simplebar-scrollbar:before {
  position: absolute;
  content: '';
  background: black;
  border-radius: 7px;
  left: 2px;
  right: 2px;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.simplebar-scrollbar.simplebar-visible:before {
  /* When hovered, remove all transitions from drag handle */
  opacity: 0.5;
  transition: opacity 0s linear;
}

.simplebar-track.simplebar-vertical {
  top: 0;
  width: 11px;
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
  top: 2px;
  bottom: 2px;
}

.simplebar-track.simplebar-horizontal {
  left: 0;
  height: 11px;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
  height: 100%;
  left: 2px;
  right: 2px;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  right: auto;
  left: 0;
  top: 2px;
  height: 7px;
  min-height: 0;
  min-width: 10px;
  width: auto;
}

/* Rtl support */
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
  right: auto;
  left: 0;
}

.hs-dummy-scrollbar-size {
  direction: rtl;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  height: 500px;
  width: 500px;
  overflow-y: hidden;
  overflow-x: scroll;
}

.simplebar-hide-scrollbar {
  position: fixed;
  left: 0;
  visibility: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

 

Set data-simplebar on the element you want your custom scrollbar.

<div data-simplebar></div>

 

This is the fastest way, but in some cases you can use the following code to target other elements:

Javascript:

new SimpleBar(document.getElementById('myElement'));

jQuery:

jQuery: new SimpleBar($('myElement')[0]);

 

The default styling is applied with CSS. There is no "built-in" way to style the scrollbar, you just need to override the default CSS.

Example to change the color of the scrollbar:

.simplebar-scrollbar::before {
	background-color: red;
}

You can find these properties from the CSS File.

You may also like

How to upload and attach files to Joomla articles

Off-Canvas module in Joomla

K2 to Content Migration

Say something here...
You are a guest ( Sign Up ? )
or post as a guest
Loading comment... The comment will be refreshed after 00:00.

Be the first to comment.

Powered By JLex Comment.
Joomla commenting system QC

Latest articles

Latest Comments

Aoife Murphy Import Content from CSV file
Does it support importing meta descriptions and SEO-related fields from the CSV?
Clive Middleton Off-Canvas module in Joomla
Hello your previous CCS advise was very helpful.

I have been googling how to change the menu colours, as the black text on my purple background is not very readable. However everything I have tried to change the text colour of the Off-Canvas main menu text to white did not work.

Would you know what custom CSS I would need to change all menu items to white text (including submenus).
Probably need background colour to not be white when hovering over submenus

Any help you can provide would be gratefully appreciated (or a pointer to some useful help).

Thank you

see

https://siteupdate.vedicmaths.org/index.php
Clive Middleton Off-Canvas module in Joomla
Currently in process of upgrading my version of Joomla for my site upgrade domain

InPre-Update Check for Joomla ‎5.4.4

for Off-Canvas it says

Joomla cannot detect the extension's compatibility with the target version of Joomla.

have you implemented the compatibility stuff for Joomla to upgrade extensions correctly ?
Clive Middleton Off-Canvas module in Joomla
OK getting back to looking at my website

Have got two off canvas menus working (1. for tools and 2. for main menu)

However I can only get the Main menu to display the first level of menu items.

Have you any suggestions for getting the sub menu items to display ?
N.B. the menu item with sub menu items does display a down arrow, but trying to click on it only display the item at the main menu level.

see

https://siteupdate.vedicmaths.org/index.php

If you want to see where I have currently got to
Thomas Illies Embed an IFrame into Joomla
Is it possible to embed the contents of a text file stored in a subdirectory of the webserver ?