我如何通过CSS(层叠样式表)为一个div而不是整个页面自定义滚动条?
当前回答
假设div为
<div class="custom_scroll"> ... </div>
应用CSS样式为
//custom scroll style definitions
.custom_scroll
{
overflow-y: scroll;
}
//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
opacity: 0.5;
//background-color: #F5F5F5;
}
.custom_scroll::-webkit-scrollbar
{
width: 5px;
opacity: 0.5;
//background-color: #F5F5F5;
}
.custom_scroll::-webkit-scrollbar-thumb
{
border-radius: 10px;
opacity: 0.5;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
//background-color: #555;
}
产生的滚动将显示为
其他回答
或者像这样使用:
var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};
并初始化:
<body onload="new MiniScroll(this);"></body>
和自定义:
.scroll-place { // ... // }
.scroll { // ... // }
假设div为
<div class="custom_scroll"> ... </div>
应用CSS样式为
//custom scroll style definitions
.custom_scroll
{
overflow-y: scroll;
}
//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
opacity: 0.5;
//background-color: #F5F5F5;
}
.custom_scroll::-webkit-scrollbar
{
width: 5px;
opacity: 0.5;
//background-color: #F5F5F5;
}
.custom_scroll::-webkit-scrollbar-thumb
{
border-radius: 10px;
opacity: 0.5;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
//background-color: #555;
}
产生的滚动将显示为
对于使用sass的人来说，这里是一个具有基本功能(拇指，轨道颜色和宽度)的mixin。我没有广泛地测试它，所以请随意指出任何错误。
@mixin element-scrollbar($thumb-color, $background-color: mix($thumb-color, white, 50%), $width: 1rem) {
// For Webkit
&::-webkit-scrollbar-thumb {
background: $thumb-color;
}
&::-webkit-scrollbar-track {
background: $background-color;
}
&::-webkit-scrollbar {
width: $width;
height: $width;
}
// For Internet Explorer
& {
scrollbar-face-color: $thumb-color;
scrollbar-arrow-color: $thumb-color;
scrollbar-track-color: $background-color;
}
// For Firefox future compatibility
// This is W3C draft and does not work yet. Use html-firefox-scrollbar mixin instead.
& {
scrollbar-color: $thumb-color $background-color;
scrollbar-width: $width;
}
}
// For Firefox
@mixin html-firefox-scrollbar($thumb-color, $background-color: mix($thumb-color, white, 50%), $firefox-width: this) {
// This must be used on html/:root element to take effect
& {
scrollbar-color: $thumb-color $background-color;
scrollbar-width: $firefox-width;
}
}
Firefox新版本(64)支持CSS滚动条模块级别1
.scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; scrollbar-width: thin; } <div class="scroller"> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. </div>
来源:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
https://codepen.io/fatihhayri/pen/pqdrbd
我认为你必须对所有的滚动条使用::-wekbit-scrollbar，你可以使用:
<style>
.mydiv {
height:100px;
overflow:auto;
}
/* width */
.mydiv::-webkit-scrollbar {
width: 20px;
}
/* Track */
.mydiv::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
.mydiv::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
/* Handle on hover */
.mydiv::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
</style>
<body>
<div class="mydiv"> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </div>
</body>
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
