如何移除垂直滚动条？需保留鼠标滚动交互功能

需求：移除滚动条的白色空白区域，但不能使用display:none，否则会导致鼠标用户无法正常滚动页面。

当前尝试的代码：

"&::-webkit-scrollbar": {
    display: "none",
},

可行解决方案 #

针对不同浏览器，采用以下样式组合，既能隐藏滚动条空白区域，又保留完整滚动功能：

/* WebKit内核浏览器（Chrome、Safari等） */
.target-element::-webkit-scrollbar {
    width: 0;
    background-color: transparent; /* 消除残留空白背景 */
}

/* IE 及 Edge 浏览器 */
.target-element {
    -ms-overflow-style: none;
}

/* Firefox 浏览器 */
.target-element {
    scrollbar-width: none;
}

说明 #

• 对WebKit浏览器，通过width: 0将滚动条宽度设为0，同时设置透明背景，彻底移除空白区域，而非直接隐藏滚动条元素；
• -ms-overflow-style: none和scrollbar-width: none分别兼容IE/Edge和Firefox，实现无滚动条但保留滚动功能的效果；
• 该方案不会影响鼠标滚轮拖动、键盘方向键等滚动操作，所有用户都能正常使用页面滚动功能。

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