0

Hi all,

I'm currently working on my website right now, what I want is my scrollbar to have a margin (see screenshot below)

This is how I have it right now:

enter image description here

This is how I want it to be:

enter image description here

I really hope someone could help me out with this!

Thanks in advance

bilalk
  • 19
  • 5
  • I think this can help you [How do I add a margin to a CSS scrollbar](https://stackoverflow.com/questions/29866759/how-do-i-add-a-margin-to-a-css-webkit-scrollbar) – Raghav Kavimandan Sep 17 '22 at 10:21

1 Answers1

0

By giving same background-color to the body and border-right of both scrollbar's thumb & track and then manipulating scrollbar width as per your need you can easily achieve this.

Note: I used a css variable here in this code so I can easily update the background-color of all of them at the same time.

:root{
  --custom_color: #000;
}

body{
  background-color: var(--custom_color);
  color: rgb(201, 201, 201);
}

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

::-webkit-scrollbar-track {
    border-right: solid 13px var(--custom_color);
    background-color: rgb(201, 201, 201);
}

::-webkit-scrollbar-thumb {
    border-right: solid 13px var(--custom_color);
    background-color: #4f4f4f;
}
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem illum explicabo optio accusamus fugiat facilis eius maxime tempore magni praesentium dolore, omnis aut, quisquam aperiam! Vitae eum officia, consequatur iure blanditiis voluptates fuga quaerat similique quibusdam? Aspernatur temporibus iusto tenetur molestias dolor blanditiis, sint soluta quae sed quidem! Obcaecati hic nostrum, quidem quas impedit sunt. Aperiam repellat magnam aliquam doloremque obcaecati assumenda. Incidunt pariatur numquam distinctio vel. Nam, cum atque. Dicta obcaecati quaerat rem nulla cum minima in doloremque adipisci iste quam accusantium numquam itaque, amet consectetur accusamus sed soluta fugiat error illo quia neque tempore dignissimos vitae! Similique magnam modi beatae, provident sit nisi eius soluta cum doloremque iure qui itaque optio eaque officiis ex quas cumque. Ea eveniet eligendi cumque minus tempora, molestiae beatae incidunt odio assumenda blanditiis ab placeat error praesentium omnis expedita aliquam ipsum quod alias ipsam quaerat accusantium. Cum, culpa maxime, magni asperiores facilis amet aperiam, deserunt vitae quasi suscipit fugiat! Possimus temporibus officiis voluptas qui reprehenderit? Repudiandae nesciunt doloremque enim deserunt temporibus tenetur quibusdam, accusamus maiores quae sapiente, voluptates vitae ex magni excepturi est dolorem molestias expedita. Fugit dolorem quas neque minima commodi similique consequuntur, explicabo itaque provident alias sed dolore aut adipisci nostrum veniam nihil ullam placeat quod ad soluta voluptas molestiae saepe consequatur. Veniam id voluptate porro odio dicta. Suscipit sit facilis temporibus tenetur recusandae rerum quidem voluptatem quis cupiditate voluptate sint repellendus veritatis dicta harum vel fugiat in, maxime corporis quas quos. Eius ducimus incidunt nisi ad sit optio placeat porro tempora nobis cupiditate dignissimos error dolorem inventore, architecto qui repellendus eos laudantium ipsum autem accusantium veniam blanditiis reprehenderit laboriosam deleniti. At assumenda beatae dolorem amet quia nulla facere nam, ex ducimus est laborum tempore enim ab aut vitae error maxime! Ab aut qui adipisci accusamus modi quos quam officia porrob.</p>
Satyam Nagar
  • 58
  • 6