浏览器默认滚动条箭头样式的修改

我在修改浏览器默认滚动条样式时,没办法实现在滚动条两边出现单个方向箭头?在默认的方向箭头处打补丁时,滚动条的两端总是会出现两个方向的按钮。
一下是代码实例:

::-webkit-scrollbar-button {
    display: block; 
} 
::-webkit-scrollbar-button:horizontal:single-button:start {
    width: 24px;  
    background: url("../img/scroll_btn.png") 0 -52px no-repeat;
    cursor: pointer;
}
::-webkit-scrollbar-button:horizontal:single-button:end {
    width: 24px;
    background: url("../img/scroll_btn.png") 0 -77px no-repeat;
    cursor: pointer;
}
::-webkit-scrollbar-button:vertical:single-button:start {
    width: 16px;
    background: url("../img/scroll_btn.png") -3px 0px no-repeat;
    cursor: pointer;
}
::-webkit-scrollbar-button:vertical:single-button:end {
    width: 16px;
    background: url("../img/scroll_btn.png") -3px -26px no-repeat;
    cursor: pointer;
}

效果图:能否去掉红色方框的空白??

clipboard.png

阅读 8.1k
2 个回答

这个感觉是::-webkit-scrollbar-track的问题,不在于::-webkit-scrollbar-button,试着将横向滚动条槽的左右margin和padding都清掉:

::-webkit-scrollbar-track:horizontal {
    padding: 0;
    margin: 0;
}
新手上路,请多包涵

每条轨道默认是4个按钮,那两个应该是余下的你还没设置样式的按钮,把他们隐藏就好。

::-webkit-scrollbar-button:horizontal:start:increment {//横向 开始端 增量按钮
    display:none;
}
::-webkit-scrollbar-button:horizontal:end:decrement {//横向 末尾端 减量按钮
    display:none;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题