如何将textarea滚动条的thumb移至左侧可用区域？

要让textarea的滚动条thumb左侧留出可用空间，直接给thumb设置margin、padding或position:absolute无法生效，需通过调整滚动条轨道（track）的内边距，或给thumb添加透明边框来实现，以下是两种可行方案：

方案1：利用滚动条轨道内边距 #

给滚动条轨道设置padding-left，让轨道左侧留出空间，thumb会自动适配轨道的可用区域：

#contactUsForm textarea::-webkit-scrollbar {
    width: 20px; /* 加宽滚动条宽度，容纳左侧空隙 */
}

#contactUsForm textarea::-webkit-scrollbar-track {
    padding-left: 10px; /* 轨道左侧留空，thumb向右偏移 */
    background-color: transparent; /* 轨道透明，不影响视觉 */
}

#contactUsForm textarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #757575;
}

方案2：给Thumb添加透明左侧边框 #

通过给thumb添加透明的border-left，让thumb本身向右偏移，形成左侧空隙：

#contactUsForm textarea::-webkit-scrollbar {
    width: 20px; /* 加宽滚动条宽度，容纳透明边框 */
}

#contactUsForm textarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #757575;
    border-left: 10px solid transparent; /* 透明左边框制造空隙 */
    box-sizing: border-box; /* 确保边框包含在thumb宽度内 */
}

修改后的完整CSS代码（以方案1为例） #

替换原有滚动条相关样式即可：

html {
    background-color: #7765c8;
}

#contactUsForm {
    background-color: white;
    width: 1000px;
    height: 500px;
    font-family: 'Noto Sans New Tai Lue', sans-serif;
    border-radius: 15px;
}

#contactUsForm input, #contactUsForm textarea  {
    background-color: #e7e7e7;
    border: none;
    width: 100%;
}

#contactUsForm input {
    height: 50px;
}

#contactUsForm textarea {
    border-radius: 25px;
    resize: none;
}

/* 调整后的滚动条样式 */
#contactUsForm textarea::-webkit-scrollbar {
    width: 20px;
}

#contactUsForm textarea::-webkit-scrollbar-track {
    padding-left: 10px;
    background: transparent;
}

#contactUsForm textarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #757575;
}

说明：两种方案都需要先加宽滚动条宽度，否则留出的空隙会挤压thumb的显示区域。可根据视觉需求调整padding-left或边框的数值。

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