如何移除滚动条轨道下方的白色小方块？

我编写了以下CSS滚动条样式代码，滚动条功能正常，但滚动条下方出现了一个白色小方块，尝试了各种方法仍无法解决。

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

body::-webkit-scrollbar-track{
    background: #f1e9e9;
    border-radius: 10px;
    margin-block: 0.1875rem;
}

::-webkit-scrollbar-thumb{
    background-color: #582965;
    border-radius: 10px;
    border: 3px solid #ffffff;
}

::-webkit-scrollbar-thumb:hover{
    background-color: #40144d;
}

::-webkit-scrollbar-track:horizontal{
    display: none;
}

当前显示效果：

问题分析与解决方法 #

这个白色小方块是因为给body::-webkit-scrollbar-track设置了margin-block: 0.1875rem，导致轨道上下出现间距，而间距区域默认继承了页面的白色背景，所以露出了空白块。可以用以下两种方式解决：

1. 替换margin-block为padding-block
   保留轨道的上下间距，但用内边距替代外边距，这样背景会覆盖整个轨道区域，不会留下空白：

   body::-webkit-scrollbar-track{
       background: #f1e9e9;
       border-radius: 10px;
       padding-block: 0.1875rem;
   }
   

2. 给全局滚动条轨道设置背景色
   如果要保留margin-block，可以给所有滚动条轨道设置和页面一致的背景色，覆盖默认白色：

   ::-webkit-scrollbar-track{
       background: #f1e9e9; /* 与body轨道背景或页面背景色保持一致 */
   }
   body::-webkit-scrollbar-track{
       background: #f1e9e9;
       border-radius: 10px;
       margin-block: 0.1875rem;
   }
   

内容的提问来源于stack exchange，提问作者De_m1l3t0