滚动条样式修改(滚动条样式修改后不生效)

更新时间:2023-03-01 00:20:47 阅读：评论：0

浏览器滚动条样式设置

在开发过程中会经常遇到列表过多，然后需要滚动显示的需求，然而浏览器自带的滚动条样式往往与项目整体界面风格不搭，并且还可能有点丑，就需要去调整他的样式。

目前我使用过两种方法：

1、隐藏滚动条，或者控制滚动条宽度。目前各个浏览器没有统一的样式处理，需要针对浏览器分别设置。

（1）chrome或safari：

node::-webkit-scrollbars { width: 0; // display:none; }

（2）firefox

node { scrollbar-width:none; }

（3）IE

node { -ms-overflow-style:none; }

2、修改滚动块，滚动槽的样式。目前只了解到chrome的样式修改

（1）chrome

node::-webkit-scrollbar-track {} //修改滚动槽的样式

node::-webkit-scrollbar-thumb {} //修改滚动块的样式

因为平时工作都是运用的react框架开发，所以经过我的一番呕心沥血的查找，发现了这个贼好用的插件！

安装： npm i react-custom-scrollbars

导入： import Scrollbars from "react-custom-scrollbars";

可配置项：

class CustomScrollbars extends Component {

  render() {

    return (

      <Scrollbars

        onScroll={this.handleScroll} //滚动监听函数

        onScrollFrame={this.handleScrollFrame}

        onScrollStart={this.handleScrollStart} //滚动开始时执行的函数

        onScrollStop={this.handleScrollStop} //滚动结束时执行的函数

        onUpdate={this.handleUpdate}

        renderView={this.renderView}

//自定义水平滚动槽样式

        renderTrackHorizontal={(props)=><div className="my-style" {...props}></div>}

//自定义垂直滚动槽样式

renderTrackVertical={(props)=><div className="my-style" {...props}></div>}

       //自定义水平滚动块样式

        renderThumbHorizontal={(props)=><div className="my-style" {...props}></div>}

// 自定义垂直滚动块样式

        renderThumbVertical={(props)=><div className="my-style" {...props}></div>}

        autoHide //鼠标移除自动隐藏

        autoHideTimeout={1000} //设置隐藏的延迟执行时间

        autoHideDuration={200} //设置隐藏动画的持续时间

        autoHeight //根据所包含的节点自动调整高度

        autoHeightMin={0} //自动调整的最小高度

        autoHeightMax={200} //自动调整的最大高度，超过则滚动显示

        thumbMinSize={30} //滚动块的最小高度（默认自适应）

        universal={true}

        {...this.props}>

...需要滚动显示的dom树

</Scrollbars>

    );

  }

}

用css怎么设置div滚动条的样式，可改变大小的

在css设置可改变大小的div滚动条样式方法：

1.首先新建html文档，进入代码书写界面。

2.在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。

3.书写外层轨道css代码。body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外层轨道*/}

这里主要是设置外层轨道的形状和颜色。

4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*内层轨道*/}

这里主要是设置内层轨道的形状和颜色。

5.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。

在css中怎样改变滚动条的样式

/*IE滚动条颜色设置*/
body{
	scrollbar-arrow-color:#f2f2f3;	/*上下箭头*/
	scrollbar-track-color:#1589ce;	/*底层背景色*/
	scrollbar-face-color:#27aeff;	/*滚动条前景色*/
	scrollbar-Shadow-color:#1589ce;	/*滚动条边线色*/
}
/*chrome滚动条颜色设置*/
body::-webkit-scrollbar{width:10px;height:10px;background-color:transparent;}/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
body::-webkit-scrollbar-track{background-color:#ccc;border-radius:10px;-webkit-box-shadow:int006pxrgba(0,0,0,0.3);}/*定义滚动条轨道内阴影+圆角*/
body::-webkit-scrollbar-thumb{background-color:#555;border-radius:10px;-webkit-box-shadow:int006pxrgba(0,0,0,.3);}/*定义滑块内阴影+圆角*/

怎么样改变滚动条样式

您好，很高兴为您解答。

在ListView中添加属性：
android:scrollbarTrackVertical="@drawable/scrollbar_vertical_track"
android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"

scrollbar_vertical_track，crollbar_vertical_thumb自定义的xml文件，放在Drawable中，track是指长条，thumb是指短条，然后再xml中定义短条和长条的样式

如若满意，请点击右侧【采纳答案】，如若还有问题，请点击【追问】

希望我的回答对您有所帮助，望采纳！

~ O(∩_∩)O~

如何实现CSS3自定义滚动条样式

在chrome下可以自定义滚动条样式，举个例子

::-webkit-scrollbar
{
width:6px;
height:6px;
}
::-webkit-scrollbar-track-piece
{
background-color:rgba(204,204,204,0.66);
-webkit-border-radius:0px;
}
::-webkit-scrollbar-thumb
{
border-radius:6px;
-webkit-border-radius:6px;
background-color:#7b7b7b;
}
/*定义横向和纵向交点的样式*/
::-webkit-scrollbar-corner{background-color:transparent;}

这里可以定义滚动条的粗细度和颜色等，至于更具体的诸如分别定义横竖滚动条样式等需要你自行修改。

另外也可以利用一些开源的滚动条插件来实现你需要的效果，比如我之前使用过的nicescroll.js，在浏览器兼容方面会好一些，但是可能会对系统的稳定性有影响，这个需要你权衡。

css怎样设置滚动条的颜色及样式

改变浏览器默认的滚动条样式：

//滚动条凹槽的颜色，还可以设置边框属性

::-webkit-scrollbar-track-piece {

background-color:#f8f8f8;

}

//滚动条的宽度

::-webkit-scrollbar {

width:9px;

height:9px;

}

//滚动条的设置

::-webkit-scrollbar-thumb {

background-color:#dddddd;

background-clip:padding-box;

min-height:28px;

}

::-webkit-scrollbar-thumb:hover {

background-color:#bbb;

}

扩展资料：

给某个div，class为test1加滚动条样式：

.test1::-webkit-scrollbar {

width: 8px;

}

.test1::-webkit-scrollbar-track {

background-color:red;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius:2em;

}

.test1::-webkit-scrollbar-thumb {

background-color:green;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius:2em;

}

本文发布于:2023-02-28 19:10:00，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/zhishi/a/167760124753313.html

本文word下载地址：滚动条样式修改(滚动条样式修改后不生效).doc

本文 PDF 下载地址：滚动条样式修改(滚动条样式修改后不生效).pdf

上一篇：lennovo(lenovo联想售后客户服务中心)

下一篇：返回列表

标签：样式滚动条

留言与评论（共有 0 条评论）