CSS问题：避免自定义滚动栏左移内容并让行底边框触达容器右侧

1. 让行边框触达容器右侧 + 解决内容偏移问题 #

问题根源是浏览器默认会让滚动栏挤占内容区域宽度，导致内容收缩、边框无法撑满。可以用scrollbar-gutter: stable属性给容器预留下滚动栏的空间，不管是否出现滚动，内容区域宽度都保持一致，同时确保行元素宽度撑满容器：

.container {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-gutter: stable; /* 关键：预留滚动栏空间，避免内容偏移 */
}

.row {
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
    margin-bottom: 10px;
    width: 100%; /* 确保行宽撑满容器 */
}

2. 修复Firefox滚动栏轨道显示问题 #

Firefox的scrollbar-width仅控制滚动栏宽度，要隐藏轨道可以用scrollbar-color属性，将轨道颜色设为透明：

.container {
    /* 其他样式不变 */
    scrollbar-color: #000 transparent; /* 第一个值是滚动条滑块颜色，第二个是轨道颜色 */
}

关于是否需要JavaScript滚动栏 #

不需要。通过上述CSS属性已经能解决跨浏览器的滚动栏样式问题，scrollbar-gutter、scrollbar-width、scrollbar-color都是标准CSS属性，兼容现代Chrome、Firefox、Edge浏览器，完全不需要依赖JavaScript实现自定义滚动栏。

修改后的完整代码：

<html>
<head>
    <style>
        .container {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-gutter: stable;
            scrollbar-color: #000 transparent;
        }

        .row {
            border-bottom: 1px solid #000;
            padding-bottom: 10px;
            margin-bottom: 10px;
            width: 100%;
        }

        ::-webkit-scrollbar {
          -webkit-appearance: none;
          width: 7px;
        }

        ::-webkit-scrollbar-thumb {
          border-radius: 5px;
          background-color: #000;
          -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="row">Test</div>
        <div class="row">Test</div>
        <div class="row">Test</div>
        <div class="row">Test</div>
        <div class="row">Test</div>
        <div class="row">Test</div>
        <div class="row">Test</div>
        <div class="row">Test</div>
        <div class="row">Test</div>
    </div>
</body>
</html>

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