设置滚动条

问题1：父元素没有被子元素撑开？

解决：保证父元素没有 宽度/高度 限制，溢出隐藏，还不行的话，给父元素加浮动：float:left

溢出生成滚动条：overflow-x: scroll overflow-y: scroll

改变滚动条的样式：xxx::-webkit-scrollbar{...}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.div::-webkit-scrollbar
{
     16px;
    height: 16px;
    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: #555;
}

例子：

 

/* 设置滚动条的样式 */
::-webkit-scrollbar { 12px;}
/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
}

问题2：有滚动的时候，

ele.scrollTo(0,100) 有滚动条的时候使用，让元素滚动到指定的位置，单位px