Axure优化滚动条，美化Axure滚动条

1、设置整个页面的滚动条

javascript:
$('<style>
::-webkit-scrollbar {width: 10px; height:10px; background:transprent;}
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 8px;}
::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.3);}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.08);}
</style>').appendTo('head');

2、设置局部滚动条

应用场景：滚动表格、下拉选择器、弹框、对话框等。

javascript: 
$('<style>
.sgundong::-webkit-scrollbar {width: 20px; height:20px;background:transparent;}
.sgundong::-webkit-scrollbar-thumb {border-radius:10px; background:rgba(0,0,0,0.1);}
.sgundong::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.2);}
.sgundong::-webkit-scrollbar-track {background:rgba(0,0,0,0.06);}
</style>').appendTo('head');
$('[data-label="[[This.name]]"] ') 
  .find ("div:eq(0)")
     .addClass("sgundong");    

3、悬浮显示滚动条

应用场景：下拉选择器

javascript: 
$('<style>
.sgundong::-webkit-scrollbar {width: 0px; height:0px;background:transparent;}
.sgundong:hover::-webkit-scrollbar {width: 12px; height:12px;}
.sgundong:hover::-webkit-scrollbar-thumb {border-radius:9px; background:rgba(0,0,0,0.1);}
.sgundong:hover::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.2);}
.sgundong:hover::-webkit-scrollbar-track{background:rgba(0,0,0,0.07);}
</style>').appendTo('head');
$('[data-label="[[This.name]]"] ') 
  .find ("div:eq(0)")
     .addClass("sgundong");