angular7中使用插件美化滚动条样式

「爱情、让人受尽委屈。」 2022-02-24 13:24 313阅读 0赞

#### 依赖插件 ####

*  jQuery
 *  niceScroll

#### 安装 ####

*  `cnpm i jquery --save`
 *  `cnpm install jquery.nicescroll`

#### 引入 ####

angular.json

"scripts": [
    	"node_modules/_jquery@3.3.1@jquery/dist/jquery.min.js",
    	"node_modules/_jquery.nicescroll@3.7.6@jquery.nicescroll/dist/jquery.nicescroll.min.js"
    ],

#### 使用 ####

file.component.ts

import { Component, OnInit } from '@angular/core';
    
    // tslint:disable-next-line: no-string-literal
    const $ = window['jQuery'];
    
    @Component({
      selector: 'app-file',
      templateUrl: './file.component.html',
      styleUrls: ['./file.component.styl']
    })
    export class FileComponent implements OnInit {
    
        constructor() { }
    
        ngOnInit() {
            this.scrollBar();
        }
    
        scrollBar() {
            $('.content_wrapper').niceScroll({});
        }
    }

#### 配置项 ####

*  [https://github.com/inuyaksa/jquery.nicescroll][https_github.com_inuyaksa_jquery.nicescroll]
 *  [https://www.cnblogs.com/yjmBlogs/p/7646612.html][https_www.cnblogs.com_yjmBlogs_p_7646612.html]

[https_github.com_inuyaksa_jquery.nicescroll]: https://github.com/inuyaksa/jquery.nicescroll
[https_www.cnblogs.com_yjmBlogs_p_7646612.html]: https://www.cnblogs.com/yjmBlogs/p/7646612.html

发表评论取消回复

表情：

评论列表（有 0 条评论，313人围观）

还没有评论，来说两句吧...

相关阅读

相关 css美化浏览器滚动条

独使用css的方法虽然简单，但只有chrome兼容好，ie只能改滚动条颜色，火狐不支持css修改 1.先看chrome滚动条每部分的名字（直接引用的[https://w...

小灰灰/ 2024年04月17日 05:26/ 0 赞/ 64 阅读

相关滚动条美化

滚动条美化1 body { height: 2000px; width: 100

淡淡的烟草味﹌/ 2024年04月07日 12:26/ 0 赞/ 65 阅读

相关 css美化滚动条

::-webkit-scrollbar-track-piece { background-color: fff; -webkit-bor

淡淡的烟草味﹌/ 2023年01月15日 02:19/ 0 赞/ 129 阅读

相关滚动条样式

<style scoped> .treeFssBox>>>::-webkit-scrollbar { width: 4px;

港控/mmm°/ 2022年11月01日 14:58/ 0 赞/ 202 阅读

相关 QScrollArea qss样式表，美化滚动条

文章目录效果图如下：前言 QSS样式表代码效果图如下： ![在这里插入图片描述][397ecfc09a8e409da

女爷i/ 2022年09月17日 03:11/ 0 赞/ 512 阅读

相关 Scrollbar浏览器滚动条样式美化-知识点-案例

知识点罗列简介 > 首先需要介绍一下滚动条的组成部分。滚动条包含 track 和 thumb ![watermark_type_ZmFuZ3poZW5naGVp

悠悠/ 2022年08月30日 15:50/ 0 赞/ 229 阅读

相关滚动条样式

1.内发光效果： box-shadow: rgb(0, 187, 255) 0px 0px 8px inset !important; 2.滚动条样式 .histroy

╰+哭是因爲堅強的太久メ/ 2022年08月30日 04:27/ 0 赞/ 221 阅读

相关 angular7中使用插件美化滚动条样式

依赖插件 jQuery niceScroll 安装 `cnpm i jquery --save` `cnpm install jquery

「爱情、让人受尽委屈。」/ 2022年02月24日 13:24/ 0 赞/ 314 阅读

相关 element ui 滚动条插件

<el-scrollbar></el-scrollbar> 用的时候加个高度就行了不喜欢用这个用下面这个在一个博客看到的还不错! 先张贴一张效果

墨蓝/ 2021年09月29日 19:48/ 0 赞/ 383 阅读

相关 Windows系统HTML滚动条美化CSS样式

Windows系统下，滚动条的美化：这个一般是全局性的配置，如果需要不同的滚动条配置不同的样式，可以在每个滚动条样式前加个class设置即可。 ::-webk

- 日理万妓/ 2021年07月24日 13:50/ 0 赞/ 776 阅读