Styling the scrollbar with a left margin in CSS

I have a setup where there is a flexbox with three columns, each of which can be scrollable depending on their content.

Here is the Codepen link for reference: https://codepen.io/michaelkonstreu/pen/GRmzeJy

My goal is to add a small margin left between the content (column) and scrollbar when it is available or visible.

I attempted to achieve this using a CSS approach mentioned in this Stack Overflow post.

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #AAAAAA;
}

However, I would like to keep the default browser scrollbar style while adding my custom margin to it. So I modified the CSS to:

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}

Unfortunately, this change resulted in the scrollbar not being displayed at all.

My question: How can I add a margin left (border left) property to the default browser scrollbar while maintaining the rest of the scrollbar styles intact?

css

Answer №1

Are you a fan of enhancing your scrollbar with a border on the thumb and creating space between your content and the scrollbar? If so, then this code snippet is perfect for you!

body{
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0; 
  left: 0;
  background: #dedede;
}

.main{
  position: relative;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 64px;
}

.main-content{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  column-gap: 32px;
}

.column{
  position: relative;
  height: 100%;
  width: calc(100% / 3);
  overflow-y: auto;
  border: 1px solid red;
  box-sizing: border-box;
  padding: 8px 10px;
}

.card{
  position: relative;
  background: #fff;
  border: 1px solid #aaa;
  padding: 8px 12px;
  font-size: 20px;
  min-height: 96px;
  box-sizing: border-box;
  margin-bottom: 24px;
}

::-webkit-scrollbar {
  width: auto;
}

::-webkit-scrollbar-thumb {
  border-left: 4px solid rgba(0, 0, 0, 1);
  background-color: #AAAAAA;
}

::-webkit-scrollbar-track{
  background-color: #CCC;
}
<main class="main">
  <section class="main-content">
    <article class="column">
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
    </article>
    <article class="column">
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
    </article>
    <article class="column">
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
    </article>
  </section>
</main>

If you're interested in learning more about customizing scrollbars, check out this resource.

If you need any adjustments to this code or have specific preferences, feel free to let me know. I'll be happy to assist you further! If this solution works for you, please consider giving it a thumbs up.

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 best way to assign the order position in CSS?

I recently attempted to incorporate a CSS animated background into my project. Here is how it currently looks: The particle effect hovers above the menu list (which currently just says "test"). The CSS code for my particles is as follows: .circles { pos ...

cssreactjs

Error Icon Displayed Incorrectly in Dynamically Generated List Items in Phonegap Android App

My attempt to dynamically create a list item with JSON response and set the data-icon to "check" is not working as expected. The result always shows "arrow-r" data-icon instead. This is how I generate the list item: function CallvarURL(url) { var res ...

androidjquerycsscordova

Transform the look of an inactive hyperlink

Can the visual style of an HTML link be modified when it is disabled? For instance, by implementing something like this: a.disabled { color:#050; } <a class="disabled" disabled="disabled" href="#">Testing</a> The code snippet above appears ...

htmlcss

As soon as I insert an image, the text on the right automatically moves to the bottom

I'm going crazy over this issue. My navigation bar has three div elements, each with text aligned both vertically and horizontally at the center. However, when I insert an image (an SVG icon of a zoom lens) before the "search" text, it shifts the tex ...

htmlcssimageflexboxvertical-alignment

Perfectly aligning css tabs both vertically and horizontally with dead centering technique

Can you help me figure this out? Currently, the tabs in the HTML and CSS provided below are positioned close to the top of the screen. How can I adjust the markup so that the tabs are dead-centered (both vertically and horizontally) instead? Check out th ...

htmlcss

Why is the image popup feature not functioning properly? What could be causing the issue?

I'm experiencing issues with the functionality of my HTML file and image popup. I've attempted to troubleshoot it multiple times without success. Here is a code snippet for reference: You can view and run the code on CodePen: Open <html> ...

javascriptphphtmlcss

insert a div element at a static position with a height of 100%

Adding two divs on top and bottom of a fixed div is what I need to do. To achieve this, I created a panel with a fixed position on the left side. I added the first div with the h-100 class which sets its height to 100%. However, when I try to add the secon ...

htmlcsstwitter-bootstrapbootstrap-5

When utilizing *NgIf, the button will be shown without the accompanying text being displayed

When trying to display either a confirm or cancel button based on a boolean set in my component.ts, I implemented the following code in my HTML: <mat-dialog-actions class="dialog-actions"> <button class="cancel-btn" ...

javascripthtmlcssangulartypescript

"Consolidating into one large package, Less is compiled and bundled together

Is there a way to display only the CSS being utilized on a webpage after it loads, rather than serving all compiled .less files as one big .css file? In addition, I am interested in having a sourcemap of the .less files shown in the browser for debugging ...

cssless

"Enhance Your Webpage with Textual Links that Display Background

A div with a background image is causing issues when links are placed on top of it. The links do not display the underline when hovering over them, unlike other links on the page. Below is the code snippet causing the problem: <div style="min-height:2 ...

htmlcsshyperlinkhover

Tips for styling links in Nuxt/Vue based on specific conditions

Struggling with conditional styling in my Nuxt app. I want to change the background color of the active link based on the current page. Using .nuxt-link-exact-active works for styling the active link, but how can I customize it for each page? The links ar ...

htmlcssvue.jsnuxt.js

What is the best approach to retain a user's selection for dark mode?

I have created a small website to showcase my work, but I'm struggling to figure out how to make the website remember a user's choice of dark mode. After searching on Stack Overflow, I came across suggestions like using cookies or localStorage. ...

javascripthtmlcss

Attempting to apply a minimum width to a th element using the min-width property

I'm trying to set a width for the second th element in this table, but it's not working as expected. <th style="min-width: 50px"> Date from </th> Can anyone provide assistance with this issu ...

htmlcss

The standard jQuery Mobile CSS styling does not seem to be working across various browsers, extensive testing has been conducted

I'm currently experimenting with jQuery Mobile to enhance my skills, but I'm facing issues with applying the basic CSS styling. I have included the css link from the jQuery Mobile website and ensured that I am connected to the internet. However, ...

jqueryhtmlcssjquery-mobile

What could be causing the unequal sizes of my flex children?

After some investigation, I have discovered that the issue I'm experiencing only occurs on certain devices, indicating it may be related to the viewport size. In the code provided, the parent element has a fixed height and width, while the children a ...

cssreactjstailwind-css

Interactivity Battle: Clickable Div, Button, or href?

I'm currently exploring the optimal methods for generating buttons using HTML and CSS. In the past, I used clickable divs, but it seems that may not have been the most effective approach. Should I consider using buttons or anchor tags instead? What ...

htmlcss

Design a visually stunning image grid with the use of Bootstrap 4

I am having difficulty creating an image grid with consistent spacing between columns, like shown in the image below: https://i.sstatic.net/azsxa.jpg The issue I am facing is aligning the right margin (red line), as illustrated below: https://i.sstatic. ...

htmlcssbootstrap-4css-grid

Having trouble with dragging a file from one box to another in HTML5. The functionality is not working

Encountering an issue where the image does not display in the left box after dropping it. Here is the sequence of events: Before dragging the image: https://i.sstatic.net/C6JSM.png After dragging the image, it fails to display: https://i.sstatic.net/7Du0 ...

javascriptcsshtml

Display the JQuery element that contains a child element with a specified class

On my webpage, I have a dropdown menu (ul) and I want to keep it open when the user is on the page. Specifically, I only want to display the ul item if it contains an li element with the class ".current-menu-item". The code snippet below accomplishes this ...

javascriptjquerycssdrop-down-menushow-hide

Navigate to a specific hidden div that is initially invisible

Currently, I am working on a web chat application using next.js. The app includes an emoji picker button, which, when clicked, displays a menu of emojis. However, the issue I am facing is that the user has to scroll down in order to see the emoji menu. I a ...

javascriptcssreactjsscrollnext.js