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

Rearrange items in a display: contents wrapper using CSS Grid

I'm having trouble positioning descendants in a root grid while they are enclosed in a container with display: contents. The issue I am facing is that one element is not being correctly placed within the grid: .wrapper { width: 80ch; margin: a ...

htmlcsscss-grid

Inserting multiple rows of data into a MySQL database in a single page using only one query in PHP

This snippet shows a MySQL query being used to update and insert data into a database: if ($_POST["ok"] == "OK") { $updateSQL = sprintf("UPDATE attend SET at_status=%s, at_remarks=%s WHERE at_tt_idx=%s", GetSQLValueString ...

javascriptphpjquerymysqlcss

Unlocking the Secret to Rotating a GroundOverlay on Google Maps

I am currently working on a map project that involves adding shapes and locations onto the map and saving it. However, I am encountering an issue with groundoverlay rotation. Even though there is no built-in rotation property in the Google Maps documenta ...

jquerycssgoogle-mapsgoogle-maps-api-3

Is there a way to adjust the transparency of a span element's background without affecting the text itself?

I have some code that needs to be customized. This is my HTML: <div class="text-rotator add-top-half add-bottom-half align-left white-txt medium-txt uppercase highlight-bg"> <div class="rotator-wrap" style="display: block;"> <sp ...

csshtml

The capability to scroll within a stationary container

Whenever you click a button, a div slides out from the left by 100%. This div contains the menu for my website. The problem I'm encountering is that on smaller browser sizes, some of the links are hidden because they get covered up. The #slidingMenu ...

javascriptjqueryhtmlcss

Removing the rows that do not contain a table - nested div elements within other div elements

I am trying to create stripped rows with "complex" children, but I'm having trouble figuring out how to do it. I am using bootstrap, although I'm not sure if that makes any difference! This is what I have attempted so far: https://jsfiddle.net/ ...

htmlcssbootstrap-4css-selectors

Utilizing the Strength of Code Snippets and the Art of Style Sheet Separation

When it comes to developing beautiful web pages and forms from scratch, I often struggle as the end result tends to be quite unappealing. Luckily, there are numerous CSS code snippets available that offer stunning solutions. Currently, I am delving into py ...

htmlcssdjangostylesheetcode-snippets

Exploring the world of jQuery waypoints and the art of modifying

This is only the second question I'm asking here, so please be gentle! I've been experimenting with jQuery waypoints to dynamically show and hide a border under my navigation menu based on scroll position. For instance, when the sticky nav is ov ...

javascriptjqueryhtmlcsswordpress

Incorporate a 'Select All' functionality into ion-select by adding a dedicated button

Looking for a way to set custom buttons on ion-select through interfaceOptions in ionic 4? HTML <ion-item> <ion-label>Lines</ion-label> <ion-select multiple="true" [(ngModel)]="SelectedLines" [interfaceOptions]="customAlertOption ...

htmltypescriptionic-frameworkionic4

Conceal and reveal feature for multiple dynamic identifiers simultaneously

After submitting the form, I am dynamically creating buttons. <template name="workflow"> {{#each newaction}} <div class="btn-box" > {{> actioncardsubcontent}} <button type="button" class="cancelsub" >New Action</button&g ...

javascriptjqueryhtmlmeteor

How can I prevent the same JavaScript from loading twice in PHP, JavaScript, and HTML when using `<script>'?

Is there a PHP equivalent of require_once or include_once for JavaScript within the <script> tag? While I understand that <script> is part of HTML, I'm curious if such functionality exists in either PHP or HTML. I am looking to avoid load ...

javascripthtml

SQL/PHP challenge: Trouble updating a record

As a newcomer to PHP, I apologize if my question is basic. I am attempting to update a record using PHP / SQL. Despite researching the error message online, I cannot pinpoint the issue within my code: An error occurred: SQLSTATE[HY093]: Invalid paramet ...

phphtmlsqlrecord

What is the best way to ensure a div element on a printed page has a space between its bottom edge and the physical paper, as well as a space between its top

Within my div element lies a collection of other div elements. These elements contain lengthy text that may span multiple pages. I am attempting to print this text starting 50mm from the top edge of every physical paper, and stopping 20mm before the edge o ...

htmlcssprintingmedia-queries

Using jQuery to make an AJAX request to a Java backend server in order to update and refresh an HTML list

As someone new to using jQuery / AJAX with a Java backend system, I'm looking for guidance on making my first call. I have an HTML list structured like this: <ul> <li>Test 1</li> <li>Test 2</li> <li>Te ...

javajqueryhtmlajaxjson

How to enable seeking functionality for mp3 files with PHP

I have implemented the following PHP script: video tags are unable to extract metadata from it. Any insights on where I might be going wrong and how to rectify this situation? Your guidance would be greatly appreciated. Thank you.

...

phphtml

The previously set display value remains unchanged when switching CSS files

I'm working on a project where I need to display three separate articles based on the screen size. Article 1 should only be visible when the screen width is less than 600 pixels Article 2 should be visible between 600 and 900 pixels Article 3 shoul ...

htmlcss

Using Django and Jquery to pass multiple values to HTML, with one value stored in a .js file

Here is an example of HTML code: {% for m in mortgages %} <input id ='mortgages_counter' name='mortgages_counter' type='hidden' value='{{ m.MonthlyPaid }}'> {% endfor %} If used for a selection menu: {% for ...

jqueryhtmldjango

What are some strategies for disregarding the effects of the !important rule

After incorporating some HTML and CSS styling into a third-party site, I encountered an issue where their styling was conflicting with mine, specifically due to certain !important declarations. I want to avoid this conflict without resorting to using !impo ...

htmlcss

Adjust the appearance of self and other classes on hover using CSS

I'm looking for a way to use the :hover effect in CSS to change the font color of one class (.footer_status_tex) and the background color of another class (.footer_status_gear). Here's a simplified version of what I have in mind: CSS .footer_s ...

csshover

Can the default Bootstrap classes in the ExtLib application layout control be modified?

I am currently using the responsive Bootstrap theme in combination with the application layout control in extlib, but I have been unable to locate any documentation on whether it is possible to modify the predefined Bootstrap classes. In the example below ...

javascriptcssxmltwitter-bootstrapxpages