enable windows scroll render as mac scroll bar (+1 squashed commits)

Squashed commits: [2167dc3] change back format (+5 squashed commit) Squashed commit: [12ebc3c] change code format [3485421] add comment [7ec632a] change back for code format [5787f2f] rename to scrollbar.scss [9c6d843] fix windows scroll bar

enable windows scroll render as mac scroll bar (+1 squashed commits)
Squashed commits: [2167dc3] change back format (+5 squashed commit) Squashed commit: [12ebc3c] change code format [3485421] add comment [7ec632a] change back for code format [5787f2f] rename to scrollbar.scss [9c6d843] fix windows scroll bar
Jian Xu · 小小鲁班
1 parent 349d12ef
Showing 6 changed files with 41 additions and 14 deletions
front-end/h5/.prettierrc.json
front-end/h5/public/index.html
front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/index.js
front-end/h5/src/components/core/index.js
front-end/h5/src/components/core/styles/index.scss
front-end/h5/src/components/core/styles/scrollbar.scss
+{
+    "singleQuote":true,
+    "semi":false
+}
 \ No newline at end of file
@@ -25,6 +25,12 @@
     </style>
     <!-- <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> -->
     <script src="https://cdn.jsdelivr.net/npm/createjs@1.0.1/builds/1.0.0/createjs.min.js"></script>
+    <script>
+      // Note: 增加html userAgent标记，
+      // windows启用下仿mac的滚动条样式。
+      var doc = document.documentElement;
+      doc.setAttribute('data-useragent', navigator.userAgent);
+    </script>
   </head>
   <body>
     <noscript>
@@ -111,7 +111,7 @@ export default {
   render (h) {
     // return this.renderShortCutsPanel(this.groups)
     return (
-      <a-row gutter={20} style="max-height: calc(100vh - 140px);overflow: scroll;">
+      <a-row gutter={20} style="max-height: calc(100vh - 150px);overflow: auto;margin:0;">
         <UsageTip />
         {
           [].concat(this.pluginsList, this.npmPackages)
@@ -3,6 +3,7 @@ import Vue from &#39;vue&#39;
 import 'core/support/index.js'
 import 'core/styles/index.scss'
+import 'core/styles/scrollbar.scss'
 import 'animate.css'
 import FixedTools from 'core/editor/fixed-tools/index'
-@import url("./helpers.scss");
-@import url("./spacing-helpers.scss");
-@import url("./shape.scss");
-@import url("./align-guides.scss");
-@import url("./shortcut-btn.scss");
-@import url("./page-manager.scss");
-@import url("./canvas-wrapper.scss");
+@import url('./helpers.scss');
+@import url('./spacing-helpers.scss');
+@import url('./shape.scss');
+@import url('./align-guides.scss');
+@import url('./shortcut-btn.scss');
+@import url('./page-manager.scss');
+@import url('./canvas-wrapper.scss');
 .hidden {
   display: none !important;
@@ -21,7 +21,7 @@
   height: 30px;
   width: 130px;
   border-radius: 4px;
-  border: 1px solid #CCC;
+  border: 1px solid #ccc;
   cursor: grabbing;
   user-select: none;
@@ -32,7 +32,6 @@
   padding: 12px 0 !important;
 }
-
 .avaiable-animations-tabs .ant-tabs-nav .ant-tabs-tab {
   padding: 12px 16px !important;
 }
@@ -64,9 +63,9 @@
 .plugin-usage-tip {
   font-size: 12px;
   color: #999;
-  border-left: .2rem solid #dfe2e5;
+  border-left: 0.2rem solid #dfe2e5;
   // margin: 1rem 0;
-  padding: .25rem 0 .25rem 0.5rem;
+  padding: 0.25rem 0 0.25rem 0.5rem;
 }
 .ant-layout-sider {
@@ -134,7 +133,6 @@ $activeHoverColor: #1593ff;
 .adjust-line-wrapper-v {
   position: relative;
-  height: 100vh;
   cursor: ew-resize;
   .adjust-button {
@@ -143,4 +141,4 @@ $activeHoverColor: #1593ff;
     top: 50%;
     transform: rotate(90deg);
   }
-}
 \ No newline at end of file
+}
+// 重置windows 滚动条样式
+// 仅windows 生效，mac排除当前逻辑。
+html:not([data-useragent*='Mac OS X']) {
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: rgb(188, 188, 188);
+    border-radius: 4px;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}