定制的滚动重叠项列表

Question

ul {
  height:100px;
list-style:none;
}

li {
  border-bottom:1px solid black;
}
.scroll {
overflow-y:scroll;
height:100px;
}

.scroll::-webkit-scrollbar {
    width: 26px;
    height: 254px;
}

.scroll::-webkit-scrollbar-thumb {
    height: 254px;
    border: 10px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 18px;
   background-color:#ccd4e3;
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
.scroll::-webkit-scrollbar-button {
      background-color: transparent;
      height: 8px;
}

<div class="scroll">
<ul>
  <li>
    Some TExt
  </li>
  
    <li>
    Some TExt
  </li>
  
     <li>
    Some TExt
  </li>   <li>
    Some TExt
  </li>   <li>
    Some TExt
  </li>
    <li>
    Some TExt
  </li>
</ul>
</div>

您好，我有一个自定义的滚动条，它的宽度是一定的，我要列出要列出的项目，边框要继续下去，滚动条要出现在顶部。我有什么办法可以做到这一点？