设置overflow:scroll后页面底部出现异常滚动条问题

底部的横向灰色条是什么？ #

那是横向滚动条——因为你设置了overflow: scroll，这个属性会强制同时显示横向和纵向的滚动条容器，哪怕你的内容并没有超出容器的横向宽度，浏览器也会预留出横向滚动条的位置，所以就出现了这个灰色横条。

怎么去除这条灰色线条（横向滚动条）？ #

给你几个实用方案：

• 只保留纵向滚动：把overflow: scroll改成overflow-y: scroll，这样只会在内容超出纵向高度时显示纵向滚动条，横向的滚动条容器直接消失，自然就看不到那条灰色线了。
• 隐藏多余滚动条但保留滚动功能：如果需要保留滚动，又不想看到没用到的滚动条，可以用CSS自定义样式：
  • 针对Chrome、Edge这类webkit内核浏览器：

    /* 替换成你的容器类名 */
    .card-container::-webkit-scrollbar {
      height: 0; /* 完全隐藏横向滚动条 */
    }
    

  • 针对Firefox浏览器：

    .card-container {
      scrollbar-width: none; /* 隐藏滚动条 */
      overflow-y: auto; /* 仅允许纵向滚动 */
    }
    

• 额外检查：看看容器有没有默认的padding-bottom或者border-bottom，个别情况下这些样式也可能造成类似灰色线条的视觉效果，但多数情况还是滚动条的锅。

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