QSS设置滚动条样式

/*垂直滚动条*/
QScrollBar:vertical {
  background: transparent; /*背景色*/
  width: 10px; /*宽度*/
  margin: 0px 0px 0px 0px; /**/
  padding-top: 12px; /*距离上面12px*/
  padding-bottom: 12px; /*距离底部12px*/
}

/*横向滚动条*/
QScrollBar:horizontal {
  background: transparent; /*背景色*/
  height: 10px; /*高度*/
  margin: 0px 0px 0px 0px;
  padding-left: 12px; /*距离左边12px*/
  padding-right: 12px; /*距离右边12px*/
}

/*垂直/横向滚动条Hover效果*/
QScrollBar:vertical:hover,
QScrollBar:horizontal:hover {
  background: rgba(0, 0, 0, 30); /*背景色*/
  border-radius: 5px; /*圆角*/
}

/*垂直滚动条 - 滑块*/
QScrollBar::handle:vertical {
  background: rgba(0, 0, 0, 50);
  width: 10px;
  border-radius: 5px;
  border: none;
}

/*横向滚动条 - 滑块*/
QScrollBar::handle:horizontal {
  background: rgba(0, 0, 0, 50);
  height: 10px;
  border-radius: 5px;
  border: none;
}

/*垂直/横向滚动条滑块Hover效果*/
QScrollBar::handle:vertical:hover,
QScrollBar::handle:horizontal:hover {
  background: rgba(0, 0, 0, 100);
}

/*垂直滚动条下部分块*/
QScrollBar::add-page:vertical {
  width: 10px;
  background: transparent;
}

/*垂直滚动条上面部分块*/
QScrollBar::sub-page:vertical {
  width: 10px;
  background: transparent;
}

/*横向滚动条右边部分块*/
QScrollBar::add-page:horizontal {
  height: 10px;
  background: transparent;
}

/*横向滚动条左边部分块*/
QScrollBar::sub-page:horizontal {
  height: 10px;
  background: transparent;
}

/* ----------- 对于扁平化设计风格，下面的样式可以不用设置 ----------- */

/*垂直滚动条顶部三角形位置*/
QScrollBar::sub-line:vertical {
  height: 12px;
  width: 10px;
  background: transparent;
  subcontrol-position: top;
}

/*垂直滚动条顶部三角形图标*/
QScrollBar::up-arrow:vertical {
  image: url(:/client/images/scrollbar_arrowup_normal.png);
}

/*垂直滚动条顶部三角形图标 鼠标Hover效果*/
QScrollBar::up-arrow:vertical:hover {
  image: url(:/client/images/scrollbar_arrowup_down.png);
}

/*垂直滚动条顶部三角形图标 鼠标按下效果*/
QScrollBar::up-arrow:vertical:pressed {
  image: url(:/client/images/scrollbar_arrowup_highlight.png);
}

/*垂直滚动条底部三角形位置*/
QScrollBar::add-line:vertical {
  height: 12px;
  width: 10px;
  background: transparent;
  subcontrol-position: bottom;
}

/*垂直滚动条底部三角形图标*/
QScrollBar::down-arrow:vertical {
  image: url(:/client/images/scrollbar_arrowdown_normal.png);
}
/*垂直滚动条底部三角形图标 鼠标Hover效果*/
QScrollBar::down-arrow:vertical:hover {
  image: url(:/client/images/scrollbar_arrowdown_down.png);
}

/*垂直滚动条底部三角形图标 鼠标按下效果*/
QScrollBar::down-arrow:vertical:pressed {
  image: url(:/client/images/scrollbar_arrowdown_highlight.png);
}

/*横向滚动条左侧三角形位置*/
QScrollBar::sub-line:horizontal {
  height: 10px;
  width: 12px;
  background: transparent;
  subcontrol-position: left;
}

/*横向滚动条左侧三角形图标*/
QScrollBar::left-arrow:horizontal {
  image: url(:/client/images/scrollbar_arrowleft_normal.png);
}

/*横向滚动条左侧三角形图标 鼠标Hover效果*/
QScrollBar::left-arrow:horizontal:hover {
  image: url(:/client/images/scrollbar_arrowleft_down.png);
}

/*横向滚动条左侧三角形图标 鼠标按下效果*/
QScrollBar::left-arrow:horizontal:pressed {
  image: url(:/client/images/scrollbar_arrowleft_highlight.png);
}

/*横向滚动条右侧三角形部分*/
QScrollBar::add-line:horizontal {
  height: 10px;
  width: 12px;
  background: transparent;
  subcontrol-position: right;
}

/*横向滚动条右侧三角形图标*/
QScrollBar::right-arrow:horizontal {
  image: url(:/client/images/scrollbar_arrowright_normal.png);
}

/*横向滚动条右侧三角形图标 鼠标Hover效果*/
QScrollBar::right-arrow:horizontal:hover {
  image: url(:/client/images/scrollbar_arrowright_down.png);
}

/*横向滚动条右侧三角形图标 鼠标按下效果*/
QScrollBar::right-arrow:horizontal:pressed {
  image: url(:/client/images/scrollbar_arrowright_highlight.png);
}