Axure优化滚动条，美化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");