CSS 3滚动条 - 添加填充和光标？ [英] CSS 3 scrollbar - add padding and cursor?

问题描述

如何在滚动条上添加这两项内容？

1. 滚动条周围填充


2. >悬停滚动条时的光标

这是我的代码：

 ＃style-4 :: webkit-scrollbar-track 
 {
 background-color：#fff; 
} 
 
＃style-4 ::  -  webkit-scrollbar 
 {
 width：5px; 
 background-color：#fff; 
 
 
 
＃style-4 :: webkit-scrollbar-thumb 
 {
 background-color：#ccc; 
 
 
 
＃style-4 :: webkit-scrollbar-thumb：hover 
 {
 background-color：＃666; 
光标：指针; 
} 
  

你可以看到 here 。

是否有可能？

解决方案

关于该填充。来自左侧的示例5px填充

 ＃style-4 ::  -  webkit-scrollbar {
 width：10px; / * add 5px * / 
 ... 
} 
 
＃style-4 ::  -  webkit-scrollbar-thumb {
 box-shadow：inset 5px 0 0 0白色; / *将颜色更改为bg颜色* / 
 ... 
} 
  

为每个 -webkit-scrollbar 元素添加 cursor：pointer 并不幸运。

How can I add these two things on the scrollbar?

1. padding around the scrollbar
2. a cursor when you hover the scrollbar

This is my code:

    #style-4::-webkit-scrollbar-track
    {
        background-color: #fff;
    }

    #style-4::-webkit-scrollbar
    {
        width: 5px;
        background-color: #fff;

    }

    #style-4::-webkit-scrollbar-thumb
    {
        background-color: #ccc;

    }

    #style-4::-webkit-scrollbar-thumb:hover
    {
        background-color: #666;
        cursor: pointer;
    }

You can see it here. I want to add the padding like the ones on cssdeck.

Is it possible?

解决方案

About that padding. Sample 5px padding from left

#style-4::-webkit-scrollbar {
    width: 10px; /* add 5px */
    ...
}

#style-4::-webkit-scrollbar-thumb {
    box-shadow: inset 5px 0 0 0 white; /* change color to your bg color */
    ...
}

Adding cursor: pointer to every -webkit-scrollbar element does not unfortunately work.

这篇关于CSS 3滚动条 - 添加填充和光标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！