资料:

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. 签名/加密_Java_hutool( 01 代码实现 )

    本文档不讲解签名/加密相关的理论知识, 仅列出通过Java实现的方式. 待处理: Hutool含有很多工具的封装, 有时间需要好好研究一下(https://blog.csdn.net/moshowga ...

  2. learning express step(七)

    Route handlers enable you to define multiple routes for a path. The example below defines two routes ...

  3. python写爬虫遇到需要解码js一些记录

    js在线格式化网站 https://beautifier.io/ Python 执行 JS 代码 NodeJS 安装方式 先解决 JS 环境,这里推荐安装 Node.js ,安装方便,执行效率也高. ...

  4. P1484 种树——数据结构优先队列

    种了一下午的树,终于给搞明白了((多谢各位大神的题解)(题解就不能讲清楚点吗(看不见看不见))): 你有k个树,你可以种在一条直线上,每个位置都有一个价值,如果你把树种在这里就可以获得这个价值,但是条 ...

  5. 内存管理3- @property 参数详解

    @property ----------------- Create two classes: Book & Student ------------------- book.m #impor ...

  6. 下载安装 binary editor

    http://www.eecanalyzer.net/downloads

  7. 未能加载文件或程序集“Microsoft.SqlServer.Management.Sdk.Sfc, Version=11.0.0.0, Culture=neutral, PublicKeyToken...

    刚开始看老师 用VS新建一个“ADO.NET 实体数据模型” 但是一直报错:未能加载文件或程序集“Microsoft.SqlServer.Management.Sdk.Sfc, Version=11. ...

  8. wordpress爆破脚本的编写

    import requests import sys import queue import threading import time import getopt urll='' users='' ...

  9. IntelliJ跳转到抽象方法的实现

    ctrl + b (等价于ctrl + 鼠标点击方法名)会调到这个类型的抽象方法中: 如果想要跳转到这个方法的具体实现可以使用 ctrl + alt + 鼠标点击方法名. IntelliJ快速查找一个 ...

  10. fsLayuiPlugin数据表格弹出form表单说明

    fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...