问题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; }
例子:
![](https://img2020.cnblogs.com/blog/1517387/202008/1517387-20200811113322354-1443003657.jpg)
/* 设置滚动条的样式 */ ::-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