Conceal the scrollbar track while displaying the scrollbar thumb

Hey there! I'm looking to customize my scroll bar to have a hidden track like this. Everyone's got their own style, right?

::-webkit-scrollbar{
   width: 15px;
   height: 40px;
}

::-webkit-scrollbar-thumb{
   background-color: #DBDBDB;
   border: 4px solid transparent;
   border-radius: 11px;
   background-clip: content-box;
}

::-webkit-scrollbar * {
   background: transparent;
}

::-webkit-scrollbar-thumb:vertical {
   height: 90px;
}

I tried it out and ended up with this result:

https://i.stack.imgur.com/sM45G.png

Now here comes the question - any ideas on how to achieve this effect using CSS or maybe even JS? Thanks in advance!

htmlcssscrollbar

Answer №1

My recommendation for a potential solution:

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb {

    -webkit-border-radius: 10px;

    border-radius: 10px;

    background: rgba(,0,0,0.5); 

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Please customize it as necessary to suit your requirements.

Answer №2

To become the hero, start by including overflow: overlay; in your body tag. This will function like overflow: auto; but it will appear on top of the content rather than beside it.

Next, insert the following code snippet:

*::-webkit-scrollbar {
  background-color: transparent;
  width: 12px;
}
*::-webkit-scrollbar-track {
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  border-radius: 20px;
  border: 3px solid transparent;
  background-color: rgba(0,0,0,0.3);
  background-clip: content-box;
}

Make adjustments to the color and width according to your preferences. You're welcome!

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 are the steps to create a shadow effect on a bar chart in ChartJs?

Currently, I am utilizing version 3.9 of chartjs to construct a bar chart. My goal is to incorporate a shadow effect on the bars resembling the image in this link: Despite my efforts, I have not been able to locate instructions on how to achieve this in t ...

javascripthtmljquerycsschart.js

Elevate the React experience by smoothly sliding a fixed navbar upwards when scrolling down, and elegantly sliding it

tl;dr Don't miss the solution at the end! Looking to create a slide up and down effect on a fixed navbar in react? What's the best approach - using refs or the componentDidMount lifecycle hook? hideNav = (navbar) => { const hide = () ...

javascripthtmlcssreactjsjsx

No code is appearing on the page, just a blank space

Whenever I visit this page on the web, the screen shows up as empty and I've encountered similar issues with other JavaScript pages that I've created. This makes me wonder if there might be a missing piece of code or something else causing the pr ...

javascripthtmlbuttoncharts

Why doesn't the WordPress Genesis child-theme inherit the parent CSS styles?

I am new to using the Genesis framework and I find myself confused about its child themes. The Genesis theme comes with its own stylesheet, but in order to use Genesis, you need to install a child theme. However, the child themes I have come across (such ...

csswordpressgenesis

Tool for tracking response time on basic Ajax-requested webpage

Looking for an easy way to use ajax to load content onto a page. I want the loaded content to wait before appearing on the page, but using jQuery's .delay() function didn't work as expected. Any suggestions on how to achieve this? Appreciate any ...

javascriptphpjqueryhtmlajax

The table refuses to load

I've been troubleshooting this issue for the past two days. The array is visible in the console, but it refuses to show up on the table. I've tried multiple approaches, but none seem to work. I suspect that "tobodyHtml" is not defined properly, a ...

javascripthtmlajax

Mastering the art of positioning images using CSS and HTML in email marketing

Currently in the midst of designing an email template for a new project. I have set up a table, with one row featuring some stripes and the next row showcasing a black bar to match the site's layout. My question is: Is there a way to incorporate an i ...

htmlcssoutlookgmail

What is the reason behind why decimals don't automatically pre-fill like integers do?

Seeking help with an HTML issue - I have a field pre-filled with a decimal number, but it's not displaying the value when loaded. The field should accept both integers and decimals, but only integer values are showing up correctly. I've spent ho ...

htmlasp.netasp.net-mvcasp.net-core

Angular 2 Component attribute masking

In my Angular 2 component called Foobar, I have defined a property named foobar: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-foobar', templateUrl: './foobar.component ...

htmlangulartypescript

Unable to transmit HTML emails

I've been encountering an issue while trying to send HTML emails using Gmail SMTP from CI. It seems that my emails are being rejected if they contain any tables. Interestingly, there is no error message provided; the emails simply do not show up in my ...

phphtmlemailcodeigniter

"Utilizing Bootstrap CSS along with a variety of other CSS/HTML component bundles

Recently diving into the world of Bootstrap for my ASP.NET MVC project has been a game-changer! I'm in awe of its capabilities and functionality. However, I can't help but wish there were more ready-to-use components available to streamline the d ...

htmlcsstwitter-bootstrapkickstrap

Child element failing to resize along with parent container

Here is the HTML structure I have for a template.php page within my website. <!DOCTYPE html> <html lang="en"> <head> <title></title> ...... </head> <body> <div id="container"> ...

phphtmlcsscodeigniter

When inline elements are positioned right next to block elements

Can inline and block elements be placed on the same level without wrapping in HTML? Does it matter if they are wrapped or not? For example: <div class="name"> <span class="name__text">List name</span> </div> <div class="li ...

htmlcss

Using jQuery to make an element follow you as you scroll down a page inside a div

I've made some progress on my code: HTML <div id="header"></div> <div id="content"> <div class="sidebar-wrapper"></div> </div> <div class="session-wrapper"></div> <div id="footer"></div> ...

jqueryhtmlcss

Adjust the CSS within a <style> element using jQuery or javascript

What I aim to accomplish: I intend to dynamically add and modify rules within a <style> tag using JavaScript/jQuery. Reason behind this goal: I am in the process of creating a color scheme editor where changes made by the user should be reflected ...

javascriptjqueryhtmlcss

Adaptable placement of background across screen widths

I am facing an issue with three buttons that have the same height and width, text, and background icons on the right. On small screens or when there is only a single word in the button, I want to move the icons to the bottom center of the button. Is there ...

htmlcss

The CSS styles do not seem to be taking effect on the Bootstrap

Here's a snippet of code extracted from my website's html and css files. My intention is to make the navbar slightly transparent with centered links, but for some reason, the css styles are not applying correctly to the navbar. HTML <body ...

htmlcssbootstrap-4

Generating a table with two columns utilizing ng-repeat

I am currently dealing with an array of objects that I need to showcase in a two-column layout. The challenge arises because some columns have more data than others, requiring equi-height rows. Despite utilizing Bootstrap and clearfix in my attempts to di ...

angularjshtmltwitter-bootstrapcss

Determine the dynamic height of content in a TypeScript file

Could you please provide guidance on obtaining the height of the content within this particular div element? For example, I need to calculate the dynamic height of the content. code .html <div class="margin-top-47 margin-horizontal-10" #hel ...

htmlcssangulartypescriptionic-framework

Unique twist on the Bootstrap grid: perfectly centered

I'd like to design a 12-column Bootstrap grid with specific colors. The header should be light blue, the body in green, and the footer orange against a grey background. I want the grid to be centered on the screen with horizontal light blue stripes m ...

twitter-bootstrapcss