资料:

http://manos.malihu.gr/jquery-custom-content-scroller/  (此项是结合Jquery使用的,在此并未采用)

https://www.npmjs.com/package/ngx-perfect-scrollbar

https://www.cnblogs.com/liulei-cherry/p/10044159.html#4454915

曾多少次遇到想修改各个浏览器的滚动条样式,因为实在是看着不爽,今天终于实现了这个骚操作↓

在没有遇到ngx-perfect-scrollbar之前修改浏览器滚动条样式只会这样操作↓

  /*css主要部分的样式*/
/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 7px;
/*对垂直流动条有效*/
height: 7px;
/*对水平流动条有效*/
} /*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 3px white;
background-color: #fff;
border-radius: 3px;
} /*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
border-radius: 7px;
-webkit-box-shadow: inset 3px white;
background-color: #E8E8E8;
} /*定义两端按钮的样式*/
::-webkit-scrollbar-button {
background-color: #fff;
} /*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
background: #fff;
}

但是这个只对谷歌浏览器生效,其它浏览器并未生效

趁着最近有时间,在网上找到了ngx-perfect-scrollbar才发现是能够自定义修改各浏览器滚动条样式的,不甚欢喜。

好了,我们来看看在angular如何使用它↓

通过yarn的方式安装ngx-perfect-scrollbar包,当然也可以用npm

yarn add ngx-perfect-scrollbar

引入module

使用方式:

API 提供了两种使用方式,一种是 Component 使用方式,一种是 Derective使用方式。我在项目中用的后者

最后引入css文件

//styles.less中

@import '~perfect-scrollbar/css/perfect-scrollbar.css';

说明:可能会存在样式冲突不生效情况,这个时候 重写哈perfect-scrollbar.css文件下 的 ps__rail-x样式就行了

.ps__rail-x {
    position: relative !important;
}
最终效果如下:

关于Angular+ngx-perfect-scrollbar自定义各大浏览器滚动条样式的解决方法的更多相关文章

  1. easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()

    easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...

  2. HDFS源码文件过大,IDEA打开失败解决方法

    问题现象:hadoop 3.1.0源码文件ClientNamenodeProtocolProtos大小4M+,IDEA打开时加载失败,ClientNamenodeProtocolPB报错找不到类. - ...

  3. sharepoint 2013 资源管理器copy大文件到本地失败解决方法

    Error 0x800700DF: The file size exceeds the limit allowed and cannot be saved 中文错误信息是:文件大小超出同意范围.不能被 ...

  4. 大D实例化model-->调用自定义类方法,大M调用原声model方法

    class ContactsModel extends Model{ public function addxxx(){ } } $conmodel = D('contacts','Model'); ...

  5. SqlServer执行大的数据库脚本出错解决方法

    如果执行线上项目拷下来sqlserver的.sql的数据库脚本文件,如果文件较大时,那么就会报错内存不足之类的. 这时可以在命令提示符使用命令来执行脚本文件.切记,执行前先改一下数据库存放位置! 命令 ...

  6. U盘拷贝目标文件过大无法复制时的解决方法

    在cmd下输入:convert U盘符:/fs:ntfs    --->  回车 转换完成后可以看到U盘属性为NTFS了 这时就可以复制大文件到U盘了

  7. 自定义webkit浏览器滚动条样式

    ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background-color: trans ...

  8. Android 工程越来越大,运行变卡解决方法

    打开AS的安装目录 android-studio/bin/studio.exe.vmoptions studio64.exe.vmoptions -Xms2048m-Xmx2048m-XX:Reser ...

  9. sql脚本过大,无法打开的解决方法

    打开cmd命令窗口,输入如下命令: sqlcmd -S ipaddress -U user -P password -d dbname -i file 其中,ipaddress是数据库服务器ip,us ...

随机推荐

  1. python修改linux主机ip

    修改虚拟机的主机ip 和hostname import os, sys def conf_ip(ip): iplist = [] f = open("/etc/sysconfig/netwo ...

  2. WORD粘贴图片+DEDE

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  3. CF788B Weird journey 欧拉路径+计数

    给定一张 $n$ 个点 $m$ 条无向边的图(无重边) :定义一种行走方案为:$m-2$ 条边走 $2$ 次,其余 $2$ 条边只走一次. 两个行走方案不同,当且仅当走一次的两条边中有不同的. 一条边 ...

  4. pom.xml报错 : Missing artifact org.apache.shiro:shiro-spring:bundle:1.2.5

    添加有<type>bundle</type>标签的依赖时,都会报这个错. 需要在<build/><plugins/>里面追加标签 <plugin& ...

  5. python pywin32 安装

    pip install pywin32 参考: https://blog.csdn.net/qq_38161040/article/details/85075158

  6. CISCO实验记录七:OSPF

    一.要求 1.使用OSPF创建路由表 2.查看OSPF邻居 二.实现 1.使用OSPF创建路由表 #router ospf 1 #network 192.168.1.0 0.0.0.255 area ...

  7. 路由器的路由配置命令汇总(win和linux系统)

    路由器/Linux主机/win下主机的路由配置汇总 2009-07-16 17:43:15 分类: 系统运维 工作时总是要在这三个个体中配来配去,所以为了方便,汇总了.   win下:   使用 Ro ...

  8. linux高可用集群(HA)原理详解

    高可用集群 一.什么是高可用集群 高可用集群就是当某一个节点或服务器发生故障时,另一个节点能够自动且立即向外提供服务,即将有故障节点上的资源转移到另一个节点上去,这样另一个节点有了资源既可以向外提供服 ...

  9. 阶段5 3.微服务项目【学成在线】_day01 搭建环境 CMS服务端开发_01-项目概述-功能构架-项目背景

    这个就是博学谷下的 在线教育平台

  10. Hystrix-基本概念(设计原则和两种隔离技术)

    一.Hystrix是什么在微服务的架构系统中,每个服务都可能会调用很多其他服务,被调用的那些服务就是依赖服务.有的时候某些依赖服务出现故障也是很正常的.Hystrix可以让我们在对服务间的调用进行控制 ...