What is the best way to apply padding to the left and right of ::webkit-scrollbar-thumb?

Is there a method to mimic the unique scrollbar design used on YouTube?

Desired appearance:

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

It appears that utilizing ::webkit-scrollbar-thumb with left and right padding can help achieve this look.

I have experimented with the following code snippet:

* {
  margin: 0;
  padding: 0;
  ::-webkit-scrollbar {
    background: #181818;
    width: 12px;
  }
  ::-webkit-scrollbar-thumb {
    padding: 0 4px; // Attempting to create desired effect
    background: #909090;
    border-radius: 100px;
    &:hover {
      background: #606060;
    }
  }
}

Unfortunately, my attempts were unsuccessful...

Outcome:

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

If you have any suggestions on how to accomplish the desired outcome, I would greatly appreciate it. Thank you in advance.

htmlcsssassscrollbar

Answer №1

If you're looking for a way to fake padding, you can try using background-clip: padding-box along with transparent border-right and left properties.

::-webkit-scrollbar {
  background: #181818;
  width: 20px;
}

 ::-webkit-scrollbar-thumb {
  padding: 0 4px;
  border-right:4px solid transparent;
  border-left:4px solid transparent;
  background: #909090;
  background-clip: padding-box;
  border-radius: 100px;
  &:hover {
    background: #606060;
  }
}

html,
body {
  height: 300%;
}

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 alternative methods to prevent a div from expanding in width from the right side other than using position absolute?

Looking to create a div element that only expands from the left side as content is added? <div id="sent_message" style='background-color: #2b89cc; color: white; font-family: Arial,Helvetica, sans-serif; margin-top: 10px; display: ...

javascripthtmlcss

Searching for hidden elements within a div using a filter option

An accordion is located inside a div and a search box has been added to the div with the intention of serving as a search filter. Some accordion elements are visible within the div while others are hidden. The problem arises when trying to make the filter ...

javascriptjqueryhtmlcss

Struggling to make the toggle button appear on the bootstrap navbar when shrinking the resolution

Everything seems to be working well with the navbar initially, but when resizing the screen to a smaller resolution, all the navigation items disappear and the "hamburger icon" fails to appear. <nav class="navbar navbar-custom navbar-expand-md fi ...

htmlcssbootstrap-4

Using jQuery to update a table, however, the browser is failing to automatically refresh the

I have developed a node.js and sockets app to create a Single Page Application (SPA). The user can fill out a form to create a new lobby. Upon submission, a socket event is sent to the server, where the new lobby is added. The server then emits an event to ...

javascripthtmlnode.jssocket.io

Is your CSS failing to synchronize with HTML?

Greetings from MyWebsite.html! <DOCTYPE !html> <html> <head> <title>My Website</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CSS --> <link rel="stylesheet" href="MyWebsite ...

htmlcss

Implementing the Upload Feature using AngularJS

Currently, I'm facing a challenge in implementing an upload button on my webpage using AngularJS and Bootstrap. Specifically, I am having trouble assigning the (upload) function to that button in AngularJS. The goal is for the button to enable users t ...

javascripthtmlcssangularjs

Adjusting the line height of an inline-block div causes surrounding inline-block siblings to shift downward

As I venture into exploring the line-height property, I came across information on MDN which stated: For non-replaced inline elements, it determines the height used in calculating the line box height. However, in this scenario, when I set the line-heigh ...

htmlcssline-height

Barba.jS is causing a delay in loading scripts after the page transition

One of my index files includes Gsap and Barba JS, while an inner page includes additional JS files such as locomotive.js and OWLcarousel.js. These two JS files are not necessary for the index page. However, when transitioning from the index page to the inn ...

javascripthtmljquerybarbajs

Troubleshooting Angular JS loading problems

I'm attempting to implement the Angular-Spinner in my project: Specifically, I want to use it with http.get calls. This is what I have so far: Within controllers: $scope.loading = true; $http.get('js/data/test.json').success(function(resu ...

javascripthtmlangularjs

Creating a stylish border for a div element

Having trouble with styling a border around a div box. I'm struggling to find a way to prevent the borders from looking like this: Let me show you an example of what I'm dealing with: .num.num_1 { border-left-color: #0D2431; } .num { wid ...

htmlcss

Use multiple lines to create a stunning visualization using morris.js. Let your data

I need help creating a graph using morris.js with 2 lines. I have two sets of data in one array, but I can't seem to display both lines on the graph simultaneously. When I use todos[0], only the first line is visible, and when I use todos[1], only the ...

javascriptphphtmlcssmorris.js

The link tag cannot be used inside a division element

I am facing an issue with a button that has three different states represented by images. While the button looks great and functions well, it fails to perform its primary function - linking to another document. Upon clicking the button, no action is initi ...

javascripthtmlcss

What is the method for obtaining the angle in a CSS3 rotate transformation?

In my current code, I am setting the rotational angle of an element using the following: $('#1-link-2') .css('height', length) .css('-webkit-transform', 'rotate(' + angle + 'deg) ...

javascriptjquerycss

Struggling to properly position my dropdown menu without causing the div content to shift downward

<div id="header"> <a href="#" id="logo"></a> </div> <div id="nav_cont"> <ul id="nav"> <li id="main_btn"><a class="mainlink" href="#">Parent 01</a></li> <li id="communities_btn">< ...

css

Populate a map<object, string> with values from an Angular 6 form

I'm currently setting keys and values into a map from a form, checking for validation if the field is not null for each one. I am seeking a more efficient solution to streamline my code as I have over 10 fields to handle... Below is an excerpt of my ...

htmlangularformstypescriptfieldset

Tips for showing a variety of headers on your page

I am struggling to align multiple headers on the same horizontal line. Despite my efforts, only two of them display correctly while the third keeps dropping down a line. To see what I mean, take a look at this image: view current layout Here is the code ...

htmlvue.js

Retrieve the $_POST data from form elements that have a class attribute instead of an id

Is there a way to extract the $_POST data from all the selects on the page when the user can use Javascript to add an undefined number of sorts, given that $_POST expects ids instead of classes? html file - include_sorts.php <div class="sorts"> ...

phphtmlpost

jquery is unable to fetch the input value from a dynamically generated field inside a function

Something peculiar keeps happening to me when I utilize jQuery, which is different from what others have encountered in the forums. Whenever I make an ajax call and generate an input element (on success), like so: Start Date: <input type="text" id="gr ...

javascriptjqueryhtmlajax

Can theme changes be carried over between different pages using Material UI?

I've encountered an issue with MUI 5.14.1 where I'm getting an error every time I attempt to save themes across pages using localStorage. Any suggestions on how to resolve this problem or recommendations on a different approach would be greatly a ...

javascriptcssmaterial-uimaterial-designthemes

What is the purpose of using square brackets in a CSS style declaration?

I've recently taken over the management of a website and I came across some unfamiliar CSS syntax. Has anyone encountered this type of syntax before? Can someone explain what the square brackets inside a style represent? Thank you, Rob .trigger-tx ...

css