当前位置 : 主页 > 网页制作 > html >

设置滚动条

来源:互联网 收集:自由互联 发布时间:2021-06-12
问题1:父元素没有被子元素撑开? 解决:保证父元素没有 宽度/高度 限制,溢出隐藏,还不行的话,给父元素加浮动:float:left 溢出生成滚动条:overflow-x: scroll overflow-y: scroll 改变滚动
问题1:父元素没有被子元素撑开? 解决:保证父元素没有 宽度/高度 限制,溢出隐藏,还不行的话,给父元素加浮动:float:left
溢出生成滚动条:overflow-x: scroll overflow-y: scroll 改变滚动条的样式:xxx::-webkit-scrollbar{...}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.div::-webkit-scrollbar
{
    width: 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;
}

// 、、、、、、、、、、、、、例子2、、、、、、、、、、、、、、、
/* 设置滚动条的样式 */
::-webkit-scrollbar {width: 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
网友评论