Merge pull request #1051 in VISUAL/fineui from ~WINDY/fineui:master to master

* commit '21dea8ac479d5c86eaa9c2961459ea580857529b':
  拖拽期间不发事件
  update
  BI-48769 refactor: 统一滚动条样式

dist/2.0/fineui.css

@@ -4664,44 +4664,64 @@ body {
 div::-webkit-scrollbar,
 textarea::-webkit-scrollbar {
   -webkit-appearance: none;
-  background-color: rgba(32, 38, 59, 0.05);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
-  width: 6px;
-  height: 6px;
+  width: 10px;
+  height: 10px;
+}
+div::-webkit-scrollbar-track,
+textarea::-webkit-scrollbar-track {
+  width: 10px;
+  height: 10px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
+}
+div::-webkit-scrollbar-track:hover,
+textarea::-webkit-scrollbar-track:hover {
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
 }
 div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(32, 38, 59, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
+  width: 6px;
+  height: 6px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  background-color: rgba(35, 46, 64, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
 }
 div::-webkit-scrollbar-thumb:hover,
 textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(32, 38, 59, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
+  background-color: rgba(35, 46, 64, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
 }
 .bi-theme-dark div::-webkit-scrollbar,
 .bi-theme-dark textarea::-webkit-scrollbar {
   -webkit-appearance: none;
+}
+.bi-theme-dark div::-webkit-scrollbar-track,
+.bi-theme-dark textarea::-webkit-scrollbar-track {
+  background-color: rgba(255, 255, 255, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
+}
+.bi-theme-dark div::-webkit-scrollbar-track:hover,
+.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
   background-color: rgba(255, 255, 255, 0.05);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
-  width: 6px;
-  height: 6px;
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(255, 255, 255, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
+  background-color: rgba(255, 255, 255, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb:hover,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
+  background-color: rgba(255, 255, 255, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
 }
 .bi-farbtastic .wheel {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/background/wheel.png') no-repeat center center;

dist/2.0/fineui.ie.js

@@ -82225,7 +82225,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {

dist/2.0/fineui.js

@@ -82629,7 +82629,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {

dist/bundle.css

@@ -4664,44 +4664,64 @@ body {
 div::-webkit-scrollbar,
 textarea::-webkit-scrollbar {
   -webkit-appearance: none;
-  background-color: rgba(32, 38, 59, 0.05);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
-  width: 6px;
-  height: 6px;
+  width: 10px;
+  height: 10px;
+}
+div::-webkit-scrollbar-track,
+textarea::-webkit-scrollbar-track {
+  width: 10px;
+  height: 10px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
+}
+div::-webkit-scrollbar-track:hover,
+textarea::-webkit-scrollbar-track:hover {
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
 }
 div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(32, 38, 59, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
+  width: 6px;
+  height: 6px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  background-color: rgba(35, 46, 64, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
 }
 div::-webkit-scrollbar-thumb:hover,
 textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(32, 38, 59, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
+  background-color: rgba(35, 46, 64, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
 }
 .bi-theme-dark div::-webkit-scrollbar,
 .bi-theme-dark textarea::-webkit-scrollbar {
   -webkit-appearance: none;
+}
+.bi-theme-dark div::-webkit-scrollbar-track,
+.bi-theme-dark textarea::-webkit-scrollbar-track {
+  background-color: rgba(255, 255, 255, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
+}
+.bi-theme-dark div::-webkit-scrollbar-track:hover,
+.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
   background-color: rgba(255, 255, 255, 0.05);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
-  width: 6px;
-  height: 6px;
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(255, 255, 255, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
+  background-color: rgba(255, 255, 255, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb:hover,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
+  background-color: rgba(255, 255, 255, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
 }
 .bi-farbtastic .wheel {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/background/wheel.png') no-repeat center center;

dist/bundle.ie.js

@@ -82225,7 +82225,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {

dist/bundle.js

@@ -82629,7 +82629,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {

dist/fineui.css

@@ -4664,44 +4664,64 @@ body {
 div::-webkit-scrollbar,
 textarea::-webkit-scrollbar {
   -webkit-appearance: none;
-  background-color: rgba(32, 38, 59, 0.05);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
-  width: 6px;
-  height: 6px;
+  width: 10px;
+  height: 10px;
+}
+div::-webkit-scrollbar-track,
+textarea::-webkit-scrollbar-track {
+  width: 10px;
+  height: 10px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
+}
+div::-webkit-scrollbar-track:hover,
+textarea::-webkit-scrollbar-track:hover {
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
 }
 div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(32, 38, 59, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
+  width: 6px;
+  height: 6px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  background-color: rgba(35, 46, 64, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
 }
 div::-webkit-scrollbar-thumb:hover,
 textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(32, 38, 59, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
+  background-color: rgba(35, 46, 64, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
 }
 .bi-theme-dark div::-webkit-scrollbar,
 .bi-theme-dark textarea::-webkit-scrollbar {
   -webkit-appearance: none;
+}
+.bi-theme-dark div::-webkit-scrollbar-track,
+.bi-theme-dark textarea::-webkit-scrollbar-track {
+  background-color: rgba(255, 255, 255, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
+}
+.bi-theme-dark div::-webkit-scrollbar-track:hover,
+.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
   background-color: rgba(255, 255, 255, 0.05);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
-  width: 6px;
-  height: 6px;
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(255, 255, 255, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
+  background-color: rgba(255, 255, 255, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb:hover,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
+  background-color: rgba(255, 255, 255, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
 }
 .bi-farbtastic .wheel {
   background: url('resources?path=/com/fr/web/ui/images/1x/background/wheel.png') no-repeat center center;

dist/fineui.ie.js

@@ -82470,7 +82470,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {

dist/fineui.js

@@ -82874,7 +82874,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {

dist/fineui_without_jquery_polyfill.js

@@ -65480,7 +65480,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {

dist/resource.css

@@ -30,44 +30,64 @@ body {
 div::-webkit-scrollbar,
 textarea::-webkit-scrollbar {
   -webkit-appearance: none;
-  background-color: rgba(32, 38, 59, 0.05);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
-  width: 6px;
-  height: 6px;
+  width: 10px;
+  height: 10px;
+}
+div::-webkit-scrollbar-track,
+textarea::-webkit-scrollbar-track {
+  width: 10px;
+  height: 10px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
+}
+div::-webkit-scrollbar-track:hover,
+textarea::-webkit-scrollbar-track:hover {
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
 }
 div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(32, 38, 59, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
+  width: 6px;
+  height: 6px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  background-color: rgba(35, 46, 64, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
 }
 div::-webkit-scrollbar-thumb:hover,
 textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(32, 38, 59, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
+  background-color: rgba(35, 46, 64, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
 }
 .bi-theme-dark div::-webkit-scrollbar,
 .bi-theme-dark textarea::-webkit-scrollbar {
   -webkit-appearance: none;
+}
+.bi-theme-dark div::-webkit-scrollbar-track,
+.bi-theme-dark textarea::-webkit-scrollbar-track {
+  background-color: rgba(255, 255, 255, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
+}
+.bi-theme-dark div::-webkit-scrollbar-track:hover,
+.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
   background-color: rgba(255, 255, 255, 0.05);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
-  width: 6px;
-  height: 6px;
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(255, 255, 255, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
+  background-color: rgba(255, 255, 255, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb:hover,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
+  background-color: rgba(255, 255, 255, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
 }
 .bi-farbtastic .wheel {
   background: url('images/1x/background/wheel.png') no-repeat center center;

dist/widget.js

@@ -20295,7 +20295,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {

public/css/app.css

@@ -30,42 +30,62 @@ body {
 div::-webkit-scrollbar,
 textarea::-webkit-scrollbar {
   -webkit-appearance: none;
-  background-color: rgba(32, 38, 59, 0.05);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
-  width: 6px;
-  height: 6px;
+  width: 10px;
+  height: 10px;
+}
+div::-webkit-scrollbar-track,
+textarea::-webkit-scrollbar-track {
+  width: 10px;
+  height: 10px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
+}
+div::-webkit-scrollbar-track:hover,
+textarea::-webkit-scrollbar-track:hover {
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
 }
 div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(32, 38, 59, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
+  width: 6px;
+  height: 6px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  background-color: rgba(35, 46, 64, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
 }
 div::-webkit-scrollbar-thumb:hover,
 textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(32, 38, 59, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
+  background-color: rgba(35, 46, 64, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
 }
 .bi-theme-dark div::-webkit-scrollbar,
 .bi-theme-dark textarea::-webkit-scrollbar {
   -webkit-appearance: none;
+}
+.bi-theme-dark div::-webkit-scrollbar-track,
+.bi-theme-dark textarea::-webkit-scrollbar-track {
+  background-color: rgba(255, 255, 255, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
+}
+.bi-theme-dark div::-webkit-scrollbar-track:hover,
+.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
   background-color: rgba(255, 255, 255, 0.05);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
-  width: 6px;
-  height: 6px;
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(255, 255, 255, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
+  background-color: rgba(255, 255, 255, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb:hover,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
+  background-color: rgba(255, 255, 255, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
 }

src/css/resource/app.css

@@ -30,42 +30,62 @@ body {
 div::-webkit-scrollbar,
 textarea::-webkit-scrollbar {
   -webkit-appearance: none;
-  background-color: rgba(32, 38, 59, 0.05);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
-  width: 6px;
-  height: 6px;
+  width: 10px;
+  height: 10px;
+}
+div::-webkit-scrollbar-track,
+textarea::-webkit-scrollbar-track {
+  width: 10px;
+  height: 10px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
+}
+div::-webkit-scrollbar-track:hover,
+textarea::-webkit-scrollbar-track:hover {
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
 }
 div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(32, 38, 59, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
+  width: 6px;
+  height: 6px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  background-color: rgba(35, 46, 64, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
 }
 div::-webkit-scrollbar-thumb:hover,
 textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(32, 38, 59, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
+  background-color: rgba(35, 46, 64, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
 }
 .bi-theme-dark div::-webkit-scrollbar,
 .bi-theme-dark textarea::-webkit-scrollbar {
   -webkit-appearance: none;
+}
+.bi-theme-dark div::-webkit-scrollbar-track,
+.bi-theme-dark textarea::-webkit-scrollbar-track {
+  background-color: rgba(255, 255, 255, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
+}
+.bi-theme-dark div::-webkit-scrollbar-track:hover,
+.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
   background-color: rgba(255, 255, 255, 0.05);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
-  width: 6px;
-  height: 6px;
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(255, 255, 255, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
+  background-color: rgba(255, 255, 255, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb:hover,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
+  background-color: rgba(255, 255, 255, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
 }

src/less/lib/constant.less

@@ -102,7 +102,9 @@
 @border-color-disabled-theme-dark: #606479;
 
 //scroll color
-@scroll-color: #20263b;
+@scroll-color: #232e40;
 @scroll-color-theme-dark: #ffffff;
+@scroll-thumb-color: #232e40;
+@scroll-thumb-color-theme-dark: #232e40;
 
 @water-mark-color-theme-dark: #878d9f;

src/less/resource/app.less

@@ -29,15 +29,27 @@ body {
 div, textarea {
   &::-webkit-scrollbar {
     -webkit-appearance: none;
+    width: 10px;
+    height: 10px;
+  }
+  &::-webkit-scrollbar-track {
+    width: 10px;
+    height: 10px;
+    .border-radius(5px);
     .background-color(@scroll-color, 5%);
-    width: 6px;
-    height: 6px;
+    &:hover {
+      .background-color(@scroll-color, 5%);
+    }
   }
   &::-webkit-scrollbar-thumb {
-    .border-radius(0);
-    .background-color(@scroll-color, 30%);
+    width: 6px;
+    height: 6px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    .border-radius(10px);
+    .background-color(@scroll-color, 10%);
     &:hover {
-      .background-color(@scroll-color, 70%);
+      .background-color(@scroll-color, 30%);
     }
   }
 }
@@ -46,15 +58,17 @@ div, textarea {
   div, textarea {
     &::-webkit-scrollbar {
       -webkit-appearance: none;
+    }
+    &::-webkit-scrollbar-track {
       .background-color(@scroll-color-theme-dark, 5%);
-      width: 6px;
-      height: 6px;
+      &:hover {
+        .background-color(@scroll-color-theme-dark, 5%);
+      }
     }
     &::-webkit-scrollbar-thumb {
-      .border-radius(0);
-      .background-color(@scroll-color-theme-dark, 30%);
+      .background-color(@scroll-color-theme-dark, 10%);
       &:hover {
-        .background-color(@scroll-color-theme-dark, 70%);
+        .background-color(@scroll-color-theme-dark, 30%);
       }
     }
   }

src/widget/singleslider/singleslider.js

@@ -157,7 +157,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {

ui/css/app.css

@@ -30,42 +30,62 @@ body {
 div::-webkit-scrollbar,
 textarea::-webkit-scrollbar {
   -webkit-appearance: none;
-  background-color: rgba(32, 38, 59, 0.05);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
-  width: 6px;
-  height: 6px;
+  width: 10px;
+  height: 10px;
+}
+div::-webkit-scrollbar-track,
+textarea::-webkit-scrollbar-track {
+  width: 10px;
+  height: 10px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
+}
+div::-webkit-scrollbar-track:hover,
+textarea::-webkit-scrollbar-track:hover {
+  background-color: rgba(35, 46, 64, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
 }
 div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(32, 38, 59, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
+  width: 6px;
+  height: 6px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  background-color: rgba(35, 46, 64, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
 }
 div::-webkit-scrollbar-thumb:hover,
 textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(32, 38, 59, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
+  background-color: rgba(35, 46, 64, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
 }
 .bi-theme-dark div::-webkit-scrollbar,
 .bi-theme-dark textarea::-webkit-scrollbar {
   -webkit-appearance: none;
+}
+.bi-theme-dark div::-webkit-scrollbar-track,
+.bi-theme-dark textarea::-webkit-scrollbar-track {
+  background-color: rgba(255, 255, 255, 0.05);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
+}
+.bi-theme-dark div::-webkit-scrollbar-track:hover,
+.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
   background-color: rgba(255, 255, 255, 0.05);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
-  width: 6px;
-  height: 6px;
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  background-color: rgba(255, 255, 255, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
+  background-color: rgba(255, 255, 255, 0.1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
 }
 .bi-theme-dark div::-webkit-scrollbar-thumb:hover,
 .bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
+  background-color: rgba(255, 255, 255, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
 }