Adjust scrollbar thumb size using CSS

I am looking to customize my scrollbar with a larger thumb size compared to the track. While I can adjust the color and other properties easily, I am struggling to change the sizes of the thumb and track separately.

.custom_scrollbar::-webkit-scrollbar {
width: 1px;
}
.custom_scrollbar::-webkit-scrollbar-track {
background-color: rgb(255, 255, 255);
-webkit-border-radius: 1px;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical {
background-color: rgb(142, 142, 142);
-webkit-border-radius: 0px;
-webkit-width:5;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical:hover {
background: rgba(0, 245, 255, 0.65);
}

#page {
width: 75%;
overflow-y: scroll;
overflow-x: hidden;
height: 100px;
z-index: 30;
margin: 5%;
padding: 3%;
}

cool

text text text text text text text text text text

text text text FIN :D

This is how I envision it visually:

htmlcssscrollbar

Answer №1

Although this post is quite old, I have a solution that fulfills the exact requirements as requested. This solution could prove helpful for anyone else seeking the same functionality.

Check out the Fiddle here

/* SCROLLBAR */
/* Let's customize our scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgb(0,0,0);
    border: 4px solid transparent;
    background-clip: content-box;   /* Remember this! */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(25,25,25);
    border: 1px solid rgb(0,0,0);
}

Setting background-clip: content-box is crucial for achieving the desired result. Without it, the track may appear thinner than the scroll-bar-thumb. Cheers!!

Answer №2

One alternative method is to assign a border on both sides of the track

  border-left: 3px solid white;
  border-right: 3px solid white;

CSS

.cute_scroll::-webkit-scrollbar
{
    width: 10px;
    background-color: #f8bbd0  ;

}

.cute_scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px #f06292 ;
    border-radius: 10px;
    background-color: #f8bbd0  ;

    // Add Border on Track
    border-left: 3px solid white;
    border-right: 3px solid white;

}

.cute_scroll::-webkit-scrollbar-thumb
{
    border-radius: 20px;
    -webkit-box-shadow: inset 0 0 px #ad1457 ;
    background-color: #e91e63   ;

}

Result

https://codepen.io/hiteshsahu/pen/eGQOwJ

https://i.sstatic.net/xHS25.png

Answer №3

If you want to make the thumb smaller than the track/scrollbar, a simple solution is to add a border to the thumb with the same color as the track.

Check out this demo on JSFiddle

.wrapper {
    overflow: auto;
    background: white;
    max-height: 90px;
    width: 400px;
    padding: 20px 30px;
}

.wrapper::-webkit-scrollbar{
  width: 18px;
  border-radius: 20px;
}

.wrapper::-webkit-scrollbar-track{
  background: #CCEEF4;
  border-radius: 20px;
}
::-webkit-scrollbar-thumb{
  width: 24px;
  background: #49AEC0;
  border: 5px solid #CCEEF4;
  border-radius: 15px;
}
<div class="wrapper">
    <h1>Scrolling is a Virtue</h1>
    <p>Well, it's not the first time. About it! There; keep thy finger on it. This is a cogent vice thou hast here, carpenter; let me feel its grip once. So, so; it does pinch some. Oh, sir, it will break bones—beware, beware! No fear; I like a good grip; I like to feel something in this slippery world that can hold, man.</p>
</div>

To achieve a transparent track, one can use background-clip.

Read more about setting the width of webkit-scrollbar-thumb on Stack Overflow

Answer №4

To adjust the size, you can utilize the width property within the ::-webkit-scrollbar selector.

Currently, it seems impossible to individually set the size of the thumb and track.

http://jsfiddle.net/kldfj293/

.custom {
    overflow: auto;
    background-color: lightgray;
    max-height: 500px;
    width: 400px;
}

.custom::-webkit-scrollbar {
    width: 20px;
}

.custom::-webkit-scrollbar-track {
    background-color: rgb(41, 41, 41);
}
::-webkit-scrollbar-thumb {
    width: 15px;
    background-color: rgb(111, 111, 111);
}

Answer №5

::-webkit-scrollbar-track {
background: url(../../images/scroll-bg.jpg) repeat-y 50%;}

The background image is set to 1px size.

Answer №6

::-moz-scrollbar {
    width: 16px;
    height: 100%;
}

::-moz-scrollbar-thumb:vertical {
    height: 100px;
}

Answer №7

To create an aesthetically pleasing scrollbar, simply set the border color of the scrollbar to match the background color. For example, if your background color is white, ensure that the scrollbar's border-color is also set to white.

p {
  width: 400px;
  background: #fff;
  max-height: 300px;
  overflow-y: scroll;
}

/* set border-color of scrollbar and background color of that section same */
::-webkit-scrollbar {
  width: 6px;
  border: 2px solid #fff;
  background: #000;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #888;
}

html:

<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

Answer №8

**How to Customize Scrollbar**
    .custom_scrollbar::-webkit-scrollbar {
     background: transparent;
     width: 8px;
     height: 0px;
}
 .custom_scrollbar::-webkit-scrollbar-thumb {
     height: 56px;
     border-radius: 8px;
     border: 4px solid #FFFFFF;
     background-clip: content-box;
     background-color: #000000;
}

Check out this link for more details!

Answer №9

To give the illusion of a smaller scrollbar thumb, consider using a background image.

.custom_scrollbar::-webkit-scrollbar {
  width: 10px;
}
.custom_scrollbar::-webkit-scrollbar-track-piece {
  /* Use an image that is smaller than the scrollbar thumb */
  background: url('scroll-bg.gif') center 0 repeat-y;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical {
  width: 10px;
  border: 2px solid #ffffff;
  background-color: #000000;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the solution to adding values from a counter?

I am trying to create a JavaScript counter: function animateSun() { var $elie = $("#sun"); $({ degree: 0 }).animate({ degree: 360 }, { duration: 190999, easing: 'linear', step: function(val) { now = Math.round ...

javascriptjqueryhtmlcsscounter

Enhancing webpage design by dynamically changing borders and headers using JavaScript

I have implemented a fixed positioning for the table headers using the following code: onScroll={() => { document.querySelector('thead').style.transform = `translate(0,${this.scrollRef.scrollTop}px)`; }} However, when I scroll the ta ...

javascriptcssreactjshtml-table

implementing a collapsible sidebar menu with CSS tables

I am working on a layout with three columns created using css tables to perfectly fit the browser window. The first column serves as a menu and I want it to hide or move to the left when clicked, allowing the middle column to expand into its space. However ...

javascriptjquerycss

PersistJS callback function is malfunctioning

I stumbled upon a great library for managing client storage. You can find the latest version here: https://github.com/jeremydurham/persist-js However, I encountered an issue with the callback function. var result = store.get('saved_data', func ...

javascripthtmlpersistjs

"Enhancing the spacing between background images through CSS: A guide to using the repeat property

Looking to design a background with a repeating image using CSS. background: url(../images/bg.PNG) repeat; However, facing an issue where the images are too close together. Any suggestions on how to add padding around each image? ...

css

Associate information with HTML elements

I've come across this question multiple times, but the solutions are mostly focused on HTML5. My DOCTYPE declaration is: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> I'm looking t ...

javascriptjqueryhtml

Center element horizontally at a specified breakpoint and below

Can I use Bootstrap 4 utilities to horizontally center an element like a <select> within a col at a specific breakpoint and below? I want to achieve this without using custom CSS. For instance, I want to center a <select> at xs and sm breakpoi ...

csstwitter-bootstrapbootstrap-4

Menu with a full-width fluid input field using semantic-ui

I am trying to create a fixed top menu with an image on the left, an input to its right, and another input on the far right. My goal is to have the center input stretch to fill all remaining space between the image and the other input. Although I would no ...

csssemantic-ui

Tips on successfully transferring a JavaScript variable from PHP to JavaScript

I am struggling with how to manipulate a JavaScript variable in my HTML script and then pass it to a PHP file for incrementing by 1. However, I am unsure of how to return this modified variable back to the HTML file for display. Additionally, I am uncertai ...

javascriptphphtmlvariablesincrement

Shifting Elements - Navigation triggers subtle movements in CSS styles as you move across pages

I've noticed a strange issue on my website where certain elements seem to be shifting slightly when navigating between different pages. Here's a quick video clip demonstrating the problem. It appears that these elements are not staying static as ...

cssnavigationwebhtml

How can I create a placeholder in semantic-ui components?

I'm currently utilizing the plugin and facing an issue with displaying the placeholder. Although data retrieval from the database is functioning properly, the placeholder is not being shown. Note:- When I remove the PHP code, the placeholder display ...

javascriptphphtmlhtml-selectsemantic-ui

Display or Conceal Sub-Header according to Scrolling Position

Question: My goal is to create a specific animation on my website. When loading the page on mobile, I want to display the div with ID "sub-header", but once the user scrolls more than 50px down, I want to hide it. Additionally, if the user scrolls up by 60 ...

javascriptjqueryhtmlcss

After a refresh, jQuery's mousenter event is not functioning

I am currently working on a fun project called Etch-a-Sketch for The Odin Project, and I have a jquery grid that can be redrawn with the click of a button. Initially, the grid allows the user to choose the size and then draw on it using .mouseenter. Howev ...

javascriptjqueryhtmlcss

Dynamic visuals created with Jquery and Ajax

While I'm not an experienced developer, I have managed to work with some small Jquery scripts. Lately, I've been struggling for the past month trying to figure out how to implement a specific functionality that I would like to incorporate. Does a ...

jqueryhtmlcssajaxgallery

"Troubleshooting IE-specific problem: Loading dropdown options dynamically with AJAX on change

Struggling with a particular issue lately. I'm attempting to populate a second dropdown menu based on the selection made in the first one using jquery ajax. Surprisingly, it works flawlessly on all browsers except for IE 11. Below is the ajax functio ...

javascriptphpjqueryhtmlajax

Verifying the current password and updating the hashed password

I have been struggling with creating a PHP script for updating user hashed passwords. Unfortunately, the script is not functioning as expected and no error messages are being displayed. Every time, it only shows "Your old password is incorrect" message. I ...

phphtmlmysqli

The form submission feature is malfunctioning due to JavaScript issues

I have forms that allow file uploads (images), and I am trying to restrict the size of those images to 500KB. However, for some reason, the forms are not submitting and I am unsure why. Below is the jQuery code: $('form').on('submit', ...

javascriptjqueryhtml

Angular is having trouble with the dropdown feature when using Semantic UI

I'm having trouble with the dropdown not displaying any items when I click on it. Here is the source code for reference: <div class = "ui centered grid"> <div class = "ten wide column"> <form class = "ui form"> <h4 cl ...

htmlangularsemantic-ui

Utilize jQuery to automatically assign numbers to <h1-h6> headings

Looking to develop a JavaScript function that can automatically number headings (h1- h6) for multiple projects without relying on CSS. Currently achieving this with CSS: body { counter-reset: h1; } h1 { counter-reset: h2; } h2 { counter-reset: h3; } ... T ...

javascripthtmljquerycssfunction

Unable to Toggle Bootstrap 5 Dropdown

Take a look at my code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

javascripthtmlcssvue.js