HTML中如何隐藏滚动条上下箭头但保留滚动条本身？

当前界面滚动条效果参考：

实现核心是通过CSS自定义滚动条样式，隐藏两端的箭头按钮，不会影响滚轮滚动、拖动滑块的正常交互，不同内核浏览器需要对应写兼容样式：

• Webkit内核浏览器（Chrome、新版Edge、Safari、Opera等）
  这类浏览器支持滚动条伪元素自定义，直接隐藏箭头按钮元素即可，参考代码：

  /* 定义滚动条基础尺寸，可根据设计需求调整数值 */
  ::-webkit-scrollbar {
    width: 10px; /* 垂直滚动条宽度 */
    height: 10px; /* 水平滚动条高度 */
  }
  
  /* 核心代码：隐藏滚动条两端的上下/左右箭头按钮 */
  ::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  
  /* 以下为可选自定义样式，可根据需求调整外观 */
  ::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb {
    background: #cdcdcd;
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
  }
  

• Firefox浏览器
  Firefox使用专属CSS属性控制滚动条样式，设置后默认无箭头样式，不会隐藏滚动条本身，参考代码：

  html {
    /* 可设置为thin/auto，不要设置为none（会完全隐藏滚动条） */
    scrollbar-width: thin;
    /* 第一个值为滑块颜色，第二个值为轨道背景色 */
    scrollbar-color: #cdcdcd #f0f0f0;
  }
  

• 旧版IE/Edge（Trident/EdgeHTML内核）
  这类低版本浏览器没有提供直接隐藏箭头的属性，可通过将箭头颜色设置为和轨道背景色一致，实现视觉上隐藏箭头的效果：

  body {
    /* 颜色值和你设置的滚动条轨道背景色保持一致即可 */
    scrollbar-arrow-color: #f0f0f0;
  }
  

注意：如果需要只对特定容器的滚动条生效，把上面选择器里的::-webkit-scrollbar、html替换成对应容器的选择器即可，不需要全局设置。

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