当我们应用css并执行overflow：auto时，我们将获得一个滚动条，该滚动条如何使其宽度变薄并删除上下图标

问题描述

.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);
}

.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>

此代码为您提供了我项目的模板视图，就像在侧栏中看到的滚动条一样，我想减小其宽度。帮我解决溢出时的问题：自动，然后我们会得到一个滚动条，该滚动条如何使其宽度变薄并删除上下图标。

解决方法

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

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

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

有关更多信息，请访问link

auto overflow scrollbar width