时间戳

首页 > 解决方案 > 如何使用 CSS 制作滚动条间距/填充/边距

html - 如何使用 CSS 制作滚动条间距/填充/边距

问题描述

这是我正在处理的当前滚动条。

滚动条图像

//The overflow div
div {
width: 100%;
overflow: overlay;
}

//Scroll Bar CSS
::-webkit-scrollbar{width:14px;}

::-webkit-scrollbar-thumb {background: #4b49499c;border-radius: 50px;}

::-webkit-scrollbar-track {background: transparent;}

我想让滚动条在正确的站点上有一些间距/填充/边距，而不是滚动条完全附加到右端。我试图减小 div 宽度大小。这确实可以为滚动条创建一些正确的空间，但是其中的子 div 宽度会一起减小。

缩小 div 图片宽度后

   //The overflow div
    div {
    width: 96%;
    overflow: overlay;
    }
    
    //Scroll Bar CSS
    ::-webkit-scrollbar{width:14px;}
    
    ::-webkit-scrollbar-thumb {background: #4b49499c;border-radius: 50px;}
    
    ::-webkit-scrollbar-track {background: transparent;}

这是我想要的示例结果。

预期结果

任何人都知道如何做到这一点？

标签： htmlcss

解决方案

推荐阅读