div上的CSS3滚动条样式

我的意思是这些属性

::-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; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

这是我div标签

<div class="scroll"></div>

这是我目前的CSS

.scroll { 
    width: 200px; height: 400px; 
    overflow: hidden; 
}

来源

2012-09-09 2619

'overflow：hidden'隐藏了任何滚动条，所以没有什么可以用CSS3来装饰。你必须使滚动条可见与'overflow：scroll'或'overflow：auto' – keaukraine

设置overflow: hidden隐藏滚动条。设置overflow: scroll以确保滚动条始终显示。

要使用::webkit-scrollbar属性，只需在调用它之前指定.scroll即可。

.scroll { 
    width: 200px; 
    height: 400px; 
    background: red; 
    overflow: scroll; 
} 
.scroll::-webkit-scrollbar { 
    width: 12px; 
} 

.scroll::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

.scroll::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

看到这个现场example

来源

2012-09-09 09:04:25 jacktheripper

谢谢你的工作。有没有办法可以为mozilla浏览器做同样的事情？ – 2619

不是没有jQuery/JavaScript。看到这个问题http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox – jacktheripper

.scroll { 
    width: 200px; height: 400px; 
    overflow: auto; 
}

来源

2012-09-09 09:04:38

你设置overflow: hidden。这会隐藏任何对于<div>来说太大的内容，这意味着不会显示滚动条。给你的<div>一个明确的宽度和/或高度，并改变overflow到auto：

.scroll { 
    width: 200px; 
    height: 400px; 
    overflow: scroll; 
}

如果你只是想显示滚动条如果内容比<div>长，改变overflow到overflow: auto。您也只能使用overflow-y或overflow-x显示一个滚动条。

来源

2012-09-09 09:08:02 Bojangles

css3滚动条的问题在于，交互只能在内容上执行。我们无法与触控设备上的滚动条进行交互。

来源

2014-10-14 04:48:35 user2845300

div上的CSS3滚动条样式

回答

相关问题