QScrollBar 样式表

列表、下拉框、滚动视图等滚动条设置，水平滚动条和垂直滚动条样式设置的属性基本相同，下面示例一部分写在水平滚动条，一部分写在垂直滚动条上（自行搬运测试）。

• 水平滚动条

QScrollBar:horizontal {
      border: 1px solid grey; //边框
      background: #32CC99;//背景颜色，透明是 transparent
      height: 15px; //高度
      margin: 0px 20px 0 20px;
      padding-top:1px; //没有边框情况下设置此值可以与其他空间留出间隙，**同时不影响滚动条整体宽度，不影响已经计算好的其他控件的高度**
      padding-bottom:2px;
  }
  QScrollBar::handle:horizontal {
      background: white;
      min-width: 20px;//滑块最小高度
      border-radius:6px;//滑块圆
  }
  QScrollBar::handle:horizontal:hover{
  	background:#A0A0A0; //滑块鼠标停留颜色
  }
  QScrollBar::add-line:horizontal { //滚动条左边箭头
	  //background:none;border:none; //不要箭头可以这样设置
	  //background-image:url(:/Resources/up.png);//可以设置图片，图片大于控件大小会显示不全
	  //border-image: url(:/Resources/up.png); //没有测试，图片自适应控件大小
      border: 2px solid grey;
      background: #32CC99;
      width: 20px;
      subcontrol-position: right;
      subcontrol-origin: margin;
  }

  QScrollBar::sub-line:horizontal {//滚动条右边箭头
      border: 2px solid grey;
      background: #32CC99;
      width: 20px;
      subcontrol-position: left;
      subcontrol-origin: margin;
  }
 QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
      border: 2px solid grey;
      width: 3px;
      height: 3px;
      background: white;
  }
//如果需要背景透明此处最重要，不然默认显示网格背景
  QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
      background: none;
  }

• 垂直滚动条

QScrollBar:vertical {
      border: 2px solid grey;
      //border-left:1px solid #d7d7d7;  //左分割线
      background: #32CC99; //整体背景颜色
      width: 15px;
      margin: 20px 0px 20 0px;
      padding-top:20px;  //上预留位置（放置向上箭头）
      padding-bottom:20px;  //下预留位置（放置向下箭头）
      padding-left:3px;  //左预留位置
      padding-right:3px;  //右预留位置
  }
  QScrollBar::vertical:hover{
    background:#d0d0d0; //鼠标触及滚动条样式
  }
  QScrollBar::vertical:pressed{
    background:#d0d0d0; //鼠标触及滚动条样式
  }
  QScrollBar::handle:vertical {
      background: white;
      min-height: 20px;
      margin-left:5px; //滑块与滑轨左边的距离
      margin-right:5px; //滑块与滑轨右边的距离
  }
  QScrollBar::handle:vertical:pressed{//鼠标点击滑块样式
	background:#d0d0d0;
  }
  QScrollBar::add-line:vertical {//上箭头
      border: 2px solid grey;
      background: #32CC99;
      height: 20px;
      subcontrol-position: bottom;
      subcontrol-origin: margin;
  }
QScrollBar::add-line:vertical:hover{//当鼠标放到下箭头上的时候
    height:10px;
    width:10px;
    //border-image:url(:/images/a/4.png);
    subcontrol-position:bottom;
}
  QScrollBar::sub-line:vertical {//下箭头
      border: 2px solid grey;
      background: #32CC99;
      height: 20px;
      subcontrol-position: top;
      subcontrol-origin: margin;
  }
QScrollBar::sub-line:vertical:hover{ //当鼠标放到下箭头上的时候
    height:10px;
    width:10px;
    //border-image:url(:/images/a/2.png);
    subcontrol-position:top;
}
 QScrollBar:up-arrow:vertical, QScrollBar::down-arrow:vertical {
      border: 2px solid grey;
      width: 3px;
      height: 3px;
      background: white;
  }
  QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
      background: none;//背景为空
  }
  //滑块上方、下方鼠标滑过样式
QScrollBar::sub-page:vertical:hover{
    background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(0, 104, 213, 128), stop:1 rgba(0, 104, 213, 78));
}
QScrollBar::add-page:vertical:hover{
    background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(0, 104, 213, 128), stop:1 rgba(0, 104, 213, 78));
}