0

This code is a template view of my project. In sidebar, you can see a scrollbar set using overflow: auto;.

I want to customise it by decreasing its width and removing the arrow icons.

How can I do this?

.App{
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: rgb(199, 204, 204);

}

.App_body{
  display: flex;
  height: 90vh;
  width: 90vw;
  background-color: rgb(228, 228, 228);
  box-shadow: -1px 4px 20px -6px rgb(0, 0, 0);
}

.sidebar{
    display: flex;
    flex-direction: column;
    flex: .26;
}

.sidebar_header{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color:rgb(238, 238, 238);
    border-right: 1px solid lightgray;
}

.sidebar_header_right{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 6vw;
}

.sidebar_search{
    display: flex;
    align-items: center;
    padding: 10px;
    background-color:#e2dfdf;
}

.searchbar_field{
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 30px;
    padding: 5px;
    height: 3vh;
    width: 100%;
}

.searchbar_field > .MuiSvgIcon-root{
    color:black;
    padding-left: 10px;
}

.searchbar_field >input{
    border: none;
    height: 3.5vh;
    width: 80%;
    margin-left: 20px;
}

.searchbar_field > input:focus{
    outline: none;
}

.sidebar_contact{
    background: white;
    flex:1;
    overflow: auto;
    
}

.sidebar_chat{
    display: flex;
    padding: 10px;
    align-items: center;
    border-bottom: 1px solid lightgray;
}



.sidebarChat > *{
    margin-block-start: unset;
    margin-block-end: unset;
}

.sidebar_chat_contact{
    display: block;
    padding-left: 20px;
}

.sidebar_chat_contact > *{
    margin-block-start: unset;
    margin-block-end: unset;
}
<!DOCTYPE html>
<html lang="en">
  <head>
  
    <title>React App</title>
  </head>
  <body>
     <div class="App">
     <div class="App_body">
        <div class="sidebar">
            <div class="sidebar_header">
                
                <div class="sidebar_header_right">
                  
                </div>
            </div>
            <div class="sidebar_search">
                <div class="searchbar_field">
                
                <input type="text" placeholder="search"></input>
                </div>
            </div>
            <div class="sidebar_contact">
                <div class="sidebar_chat">
            <Avatar/>
            <div class="sidebar_chat_contact">
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                <h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p><h3>Vishu</h3>
                <p>Here I'm using whatsapp!</p>
                
            </div>
        </div>
            </div>
        </div>
     </div>
    </div>
    </body>
</html>
Aryan Beezadhur
  • 4,503
  • 4
  • 21
  • 42
Vishwani Patlan
  • 1
  • Does this answer your question? [CSS customized scroll bar in div](https://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div) – Ludovit Mydla Oct 05 '20 at 12:45

1 Answers1

0
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

For more , here's a link

prince
  • 56
  • 3