CODEWITHSUNDEEP
css
michaelT
michaelT

Reputation: 1711

CSS: Add left margin to scrollbar

There is this setup: So a flexbox with three columns, each of which can be scrollable, depending on their content.

Codepen: https://codepen.io/michaelkonstreu/pen/GRmzeJy

Now I want that in the case when the scrollbar is available/visible, a small margin left should be visible between content (column) and scrollbar.

I tried this approach: https://stackoverflow.com/a/21684424

::-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;
}

But I want that the scrollbar style remains as its browser default, but adding my margin to the scrollbar. So I changed the CSS to:

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

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

In this case, the scrollbar is no longer displayed at all.

My question: How can I add a margin left (border left) property to the default browser scrollbar and leave the rest of the scrollbar styles as it is.

Upvotes: 1

Views: 4349

Answers (1)

Jaymin Maheta
Jaymin Maheta

Reputation: 54

Do you like to add a border to the scrollbar thumb and add space between your content and scrollbar right so this code will work

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>

hear you can learn more about scrollbar customization https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

or else please tell me how many changes you want so I will edit this code and i will help you and this solution work for you then please give a like

Upvotes: 1

Related Questions