Browser Scrollbar

1. Introduction

2. Getting Started: Enabling the Header & Navigation Extension

The Browser Scrollbar extension gives you complete control over the appearance and behavior of your website’s scrollbar. You can customize everything from its color and size to its scrolling physics, creating a seamless and branded browsing experience for your visitors. 🎨

Getting Started: Enabling the Browser Scrollbar  Extension

Navigate to Divi Essential

❗️Make sure your Divi Essential Plugin is active!

1. Go to your WordPress Dashboard → Divi Essential → Open the Extensions Tab → Locate the Browser Scrollbar.
   
2. Enable Browser Scrollbar and click Save.

These options control the visual style of the scrollbar.

• Scrollbar Width: Sets the thickness of the scrollbar in pixels. A higher value creates a wider scrollbar.
• Scrollbar Border Radius: Adjusts the roundness of the corners for both the scrollbar thumb (the part you drag) and the track. A value of 0 results in sharp corners, while a higher value creates more rounded corners.
• Scrollbar Thumb Color: Defines the color of the draggable handle of the scrollbar.
• Scrollbar Track Background Color: Sets the color for the background or “track” that the thumb moves along.
• Enable Scrollbar Shadow Effect: Check this box to add a subtle shadow to the scrollbar, giving it a modern, layered look and making it stand out from the page content.

These options adjust how the scrollbar functions and feels during use.

• Auto Hide Scrollbar: Controls the visibility of the scrollbar.
• Always Show: The scrollbar is always visible.
• When Scrolling: The scrollbar only appears when the user is actively scrolling the page and hides shortly after.
• Automatically (based on mouse/trackpad): The behavior is determined by the user’s operating system or device settings.
• Mouse Scroll Step: Determines how many pixels the page moves with each “tick” of a mouse’s scroll wheel. A higher number means faster scrolling.
• Scroll Speed: Adjusts the smoothness of the scroll animation. A lower number can create a snappier feel, while a higher number results in a smoother, more fluid motion.

This setting determines the scrollbar’s placement on the page.

• Scrollbar Align: Choose the position of the scrollbar.
• Right Sidebar: The default and most common position.
• Left Sidebar: Moves the scrollbar to the left side of the browser window.