更改滚动条样式

static/css/common.css

@@ -1,6 +1,43 @@
 *{padding:0;margin:0}
 .floatRight{float: right;}
 .clear{clear: both;}
+::-webkit-scrollbar
+{
+    width: 5px;
+    height: 110px;
+    background-color: #F5F5F5;
+}
+/*定义滚动条轨道 内阴影+圆角*/
+::-webkit-scrollbar-track
+{
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    border-radius: 10px;
+    background-color: #F5F5F5;
+}
+/*定义滑块 内阴影+圆角*/
+::-webkit-scrollbar-thumb
+{
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: #bdbdbd;
+}
+/*滑块效果*/
+::-webkit-scrollbar-thumb:hover
+{
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    background: rgba(0,0,0,0.4);
+}
+/*IE滚动条颜色*/
+html {
+    scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
+    scrollbar-highlight-color:#000;
+    scrollbar-3dlight-color:#000;
+    scrollbar-darkshadow-color:#000;
+    scrollbar-Shadow-color:#adadad;/*滑块边色*/
+    scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
+    scrollbar-track-color:#eeeeee;/*背景颜色*/
+}
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
     font-family: inherit;
     font-weight: 500;
@@ -251,11 +288,13 @@
     margin-bottom: 105px;
 }
 .chatBox{
-    /*max-height: 600px;*/
     /*overflow-y: auto;*/
     overflow-x: hidden;
     /*margin-bottom: 80px;*/
 }
+.chatVisitorPage .chatBox{
+    min-height: 550px;
+}
 .chatBox .el-col{margin:10px 0;}
 .chatUser{
     line-height: 24px;

static/html/chat_page.html

@@ -12,11 +12,9 @@
     <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
     <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-    <link rel="stylesheet" href="/static/css/common.css?v=0.1.3" />
+    <link rel="stylesheet" href="/static/css/common.css?v=0.2.2" />
     <style>
-        html,
         body {
-            height: 100%;
             background: #fff;
         }
     </style>
@@ -26,7 +24,7 @@
 <div id="app"  class="chatCenter">
     <template>
         <!--客服代码-->
-        <div class="chatContext">
+        <div class="chatContext chatVisitorPage">
             <div class="chatBox">
                 <el-alert
                         style="margin-bottom: 10px;font-size: 12px;"