圆形滚动条

Question

我已经吓坏了2天了，我无法创建跟随圆角的滚动条（css + html）。 有人有一些提示吗？ 这是我的代码和屏幕截图... 如果您需要更多代码，我会在此处粘贴

我需要滚动条跟随边界半径。

.clientimenu::-webkit-scrollbar {
  width: 8px;
  border-radius: 25px;
}

.clientimenu::-webkit-scrollbar-track {
  background: linear-gradient(171deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.clientimenu::-webkit-scrollbar-thumb {
  background: #4a71ff;
  border-radius: 8px;
  background-clip: padding-box;
}

.clientimenu::-webkit-scrollbar-thumb:hover {
  background: #1447ff;
}

<div class="animate__animated animate__fadeInRight" style="margin-right: 2%; animation-delay: 0.2s;">
  <div class="menu" id="menu-drop">
    <span class="select">Select an option</span>
    <div class="menu__icon-box">
      <div class="menu__icon"></div>
    </div>
    <div class="menu__dropdown ricerca1 riduzione clientimenu" id="testo1">
      <input type="text" class="barra-ricerca-clienti" placeholder="&nbsp;&nbsp;Search..." id="myInput" onkeyup="filterFunction1()">
      <div class="menu__dropdown-coption" id="t1" value="test1">test1</div>
      <div class="menu__dropdown-coption" id="t2" value="test2">test2</div>
    </div>
  </div>
</div>

Answer 1

在这里我实现了一个简单的解决方案

MyClass

div {
        width: 300px;
        height: 300px;
        margin: 10px auto;
        overflow-y: auto;
        background: #f6f6f6;
        padding: 10px;
        border-radius: 10px;
    }
    ::-webkit-scrollbar {
        width: 14px;
    }
     
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
        border-radius: 10px;
        border-top-left-radius: 0;
         border-bottom-left-radius: 0;
    }
     
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        border-radius: 10px;
        border-top-left-radius: 0;
         border-bottom-left-radius: 0;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    }

Answer 2

我用另一个div包裹了滚动项目，并有一个类内容。检查容器div的大小以及内容div。另外，我添加了溢出：在容器（在本例中为testo1）上滚动。

  .clientimenu::-webkit-scrollbar {
    width: 8px;
    border-radius: 25px;
  }
  .clientimenu::-webkit-scrollbar-track {
    background: linear-gradient(171deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  }
  .clientimenu::-webkit-scrollbar-thumb {
    background: #4a71ff;
    border-radius: 8px;
    background-clip: padding-box;
  }
  .clientimenu::-webkit-scrollbar-thumb:hover {
    background: #1447ff;
  }

  #content {
      width: 150px;
      height: 75px;
  }

  #testo1 {
    width: 150px;
    height: 75px;
    overflow: scroll; 
  }

    <div class="animate__animated animate__fadeInRight" style="margin-right: 2%; animation-delay: 0.2s;">
        <div class="menu" id="menu-drop">
            <span class="select" >Select an option</span>
            <div class="menu__icon-box">
                <div class="menu__icon"></div>
            </div>
            
            <div class="menu__dropdown ricerca1 riduzione clientimenu"  id="testo1">
                <div id="content" >
                    <input type="text" class="barra-ricerca-clienti" placeholder="&nbsp;&nbsp;Search..." id="myInput" onkeyup="filterFunction1()">
                    <div class="menu__dropdown-coption" id="t1" value="test1">test1</div>
                    <div class="menu__dropdown-coption" id="t2" value="test2">test2</div>
                    <div class="menu__dropdown-coption" id="t3" value="test1">test1</div>
                    <div class="menu__dropdown-coption" id="t4" value="test2">test2</div>
                    <div class="menu__dropdown-coption" id="t5" value="test1">test1</div>
                    <div class="menu__dropdown-coption" id="t6" value="test2">test2</div>
                    <div class="menu__dropdown-coption" id="t7" value="test1">test1</div>
                    <div class="menu__dropdown-coption" id="t8" value="test2">test2</div>
                    <div class="menu__dropdown-coption" id="t9" value="test1">test1</div>
                    <div class="menu__dropdown-coption" id="t10" value="test2">test2</div>
                </div>
            </div>
        </div>
    </div>