React中水平Scrollbar CSS样式不生效，仅垂直滚动条生效问题

• 首先确认body元素存在水平滚动需求：如果页面内容没有超出body宽度，水平滚动条不会显示，样式自然不生效。先给body设置正确的溢出属性：

body {
  overflow-x: auto; /* 内容超出时显示水平滚动条，也可用scroll强制显示 */
  overflow-y: auto;
}

• 针对webkit内核浏览器（Chrome、Edge等），需要明确设置水平滚动条的高度：之前仅设置::-webkit-scrollbar的width（对应垂直滚动条宽度），还要加上height（对应水平滚动条高度），完整样式如下：

/* 滚动条容器 */
body::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条宽度 */
  height: 8px; /* 水平滚动条高度，必须设置才会生效 */
}

/* 滚动条轨道样式 */
body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 4px;
}

/* 滚动条滑块样式 */
body::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

/* 滑块hover效果 */
body::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

• 若需兼容Firefox浏览器，可使用标准滚动条属性，该属性会同时作用于垂直和水平滚动条：

body {
  scrollbar-width: thin; /* 设置滚动条粗细 */
  scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
}

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