如何移除固定定位元素的滚动条？附Code Sandbox示例

方案1：直接禁用元素滚动 #

如果滚动条来自固定定位的目标元素，检查其CSS中的overflow属性，将触发滚动的auto/scroll替换为hidden，彻底禁用滚动并隐藏滚动条：

.fixed {
  position: fixed;
  /* 保留原有定位、尺寸等样式 */
  overflow: hidden;
}

方案2：隐藏页面全局滚动条 #

若滚动条属于<html>或<body>（固定元素未触发滚动，但页面本身存在滚动），给根元素设置禁用滚动：

html, body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

方案3：隐藏滚动条但保留滚动功能 #

如果需要保留元素内部的滚动交互，仅视觉上隐藏滚动条，可针对不同浏览器设置专属样式：

/* Chrome、Safari等WebKit内核浏览器 */
.fixed::-webkit-scrollbar {
  display: none;
}

/* Firefox */
.fixed {
  scrollbar-width: none;
}

/* IE/Edge */
.fixed {
  -ms-overflow-style: none;
}

根据示例场景，优先检查固定定位元素的overflow属性，选择对应方案即可完全移除滚动条。

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