前端常用功能16:自定义滚动条

来源：https://css-tricks.com/custom-scrollbars-in-webkit/
https://www.cnblogs.com/vicky-li/p/css.html

image.png

效果图

image.png

一.结构和样式
1.整体有一个main,里面最上第一个div就是scrollbar
上下小图标做成一个，调整位置

.content .main .scrollbar{
    float:right;
    width:16px;
    height:616px;
}

.content .main::-webkit-scrollbar{
    width: 16px;
    height:16px;

}
/*滑块*/
.content .main::-webkit-scrollbar-thumb{
    background:url(../images/scrollbar_thumb.png) center no-repeat;
}
/*轨道*/
.content .main::-webkit-scrollbar-track{
    background:url(../images/scrollbar_track.png) center no-repeat;
}

.content .main::-webkit-scrollbar-button:vertical:start{
    background:url(../images/up_bg.png) center top no-repeat;
}
.content .main::-webkit-scrollbar-button:vertical:end{
    background:url(../images/up_bg.png) center bottom no-repeat;
}

滚动条需要建立在表格内容父级的div里，如下图

绿色背景是表格本身宽高，粉色是绿色table父级div，滚动条需要建在父级div里，和table是同级

image.png

自定义滚动条

https://www.jianshu.com/p/da5d52630f36

image.png

image.png

image.png

tbody单独滚动的代码

效果图：
代码有缺陷问题，主要思想是把thead,tbody变成display:block,给tbody加高度，加滚动
单元格加padding，但是会出现如下情况，文字不一致就不行

image.png

.chart{
padding:20px;
width: 100%;
}
.table{
width: 100%;
color:#777777;
font-size:14px;
text-align: center;
 border-collapse:collapse;
 border-spacing:0;
}
.table thead,.table tbody,.table tbody tr{
display: block;
max-width:573px;
width:100%;
}
.table tbody{
height: 170px;
overflow-y: auto;
}
.table thead th,.table tbody>tr>td{
width: 25%;
height:30px;
border:1px solid #e2e2e2;
vertical-align: middle;
}
.table tbody>tr>td{
 padding:0 10px;   
}
.table thead th{
padding:0 40px;
}
.table th{
font-weight: bold;
background:#fafafa;
}

.scroll{
width: 100%;
height: 100%;
overflow: scroll;
}
.scrollbar{
width: 6px;
height:100%;
position:absolute;
z-index:50;
top:20px;
right:20px;
float:right;
}
.table tbody::-webkit-scrollbar{
width: 6px;
background-color:#fafafa;
}
.table tbody::-webkit-scrollbar-track{
background-color:#fafafa;    
}
.table tbody::-webkit-scrollbar-thumb{
background-color:green;    
}



订单编号
工件物码
工步名称
状态



       

正确方法

来源：https://www.cnblogs.com/wangEddy/p/8074535.html

image.png

# [CSS 设置table下tbody滚动条](https://www.cnblogs.com/wangEddy/p/8074535.html)

table tbody {

    display:block;

    height:195px;

    overflow-y:scroll;

}

table thead, tbody tr {

    display:table;//仍有伸缩性

    width:100%;

    table-layout:fixed;

}

table thead {

    width: calc( 100% - 1em )

}

css layout属性

image.png

image.png

image.png

正确效果如下

image.png

解法

1.整体tbody display:block, tr,thead,display:table,让tbody整体可以滚动

2. tr,thead,display:table具有伸缩性
   3.tbody固定高度，overflow-y:auto
   4.tr,thead width:100% table-layout:fixed;固定宽度跟着内容走
   5.滚动条会压缩tbody的宽度，用jq写一个变量+宽度，内容超出时，让tbody自动加宽和thead一样宽。这里注意用parseInt($("tr").css("width"));来解析数字，去掉px,记住变量加减乘除，赋属性给变量，要保持字符串一致性。
   6.滚动条直接加在tbody上

代码

//html


订单编号
工件物码
工步名称
状态



   

//css
.table{
width: 100%;
color:#777777;
font-size:14px;
text-align: center;
 border-collapse:collapse;
 border-spacing:0;
}
.table thead,.table tbody tr{
display:table;
width:98%;
table-layout:fixed;
}

.table tbody{
width: 100%;
height: 170px;
display:block;
overflow-y: auto;
}
.table thead th,.table tbody tr td{
height:30px;
border:1px solid #e2e2e2;
vertical-align: middle;
}

.table th{
font-weight: bold;
background:#fafafa;
}

.table tbody::-webkit-scrollbar{
width: 6px;
background-color:#fafafa;
}
.table tbody::-webkit-scrollbar-track{
background-color:#fafafa; 
}
.table tbody::-webkit-scrollbar-thumb{
background-color:green;
}

//js
$(function(){ 
"use strict";
   var rowCount=$("#table_data").find("tr").length;
   var x=parseInt($("tr").css("width"));
   var y= x + 1 + "px";
        if(rowCount > 5){
              $("tr").css("width",y);           
    }
});