CSS滚动条问题求助：页面双滚动条及超长绿色滚动条修复

问题描述 #

在Hostinger服务器部署网站脚本后，页面出现两个滚动条，其中一条为超长的绿色自定义滚动条，多次尝试修复未解决。

相关CSS代码 #

/*  custom css
================================================== */
body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
    background-color: #29c7ac;
    border-radius: 15px;
}
/*::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}
body {
   scrollbar-width: none;
}*/
.mb-80 {
    margin-bottom: 80px;
}

.pt-80 {
    padding-top: 80px;
}

.top_header_area {
    padding-top: 150px;
}

.layout_5 {
    background-attachment: fixed !important;
}

.on-scroll.bg_color {
    position: relative;
}

修复步骤 #

1. 统一根元素的溢出规则 #

添加以下CSS，避免html和body同时生成滚动条：

html, body {
    overflow-x: hidden; /* 隐藏水平滚动条，避免页面横向溢出 */
    overflow-y: auto;   /* 仅在内容超出时显示垂直滚动条 */
    margin: 0;
    padding: 0;
}

2. 限定自定义滚动条的作用范围 #

当前代码仅给body设置了自定义滚动条，但如果页面中其他带overflow: auto/scroll的容器继承了该样式，会生成额外滚动条。可通过以下方式重置其他容器的滚动条样式：

/* 保留body的自定义滚动条 */
body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
    background-color: #29c7ac;
    border-radius: 15px;
}

/* 重置所有其他元素的滚动条为默认样式 */
*:not(body)::-webkit-scrollbar {
    width: initial;
}
*:not(body)::-webkit-scrollbar-track {
    box-shadow: none;
}
*:not(body)::-webkit-scrollbar-thumb {
    background-color: initial;
    border-radius: initial;
}

如果能定位到具体产生额外滚动条的容器，可把*:not(body)替换为该容器的类名/ID，更精准。

3. 排查溢出元素 #

超长滚动条通常是某个元素高度超出父容器或视口导致的。按F12打开浏览器开发者工具，逐一检查元素的height、min-height和overflow属性，找到高度异常的元素后：

• 若该元素不需要滚动，设置overflow: hidden
• 若需要滚动，调整其高度至合理范围，或限制最大高度max-height: 100vh; overflow-y: auto

4. 补充跨浏览器兼容 #

针对Firefox等非webkit内核浏览器，添加滚动条样式兼容代码：

body {
    scrollbar-width: thin; /* 滚动条宽度 */
    scrollbar-color: #29c7ac rgba(0,0,0,0.3); /* 滚动条滑块/轨道颜色 */
}

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