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

「爱情、让人受尽委屈。」 2022-02-24 13:24 318阅读 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 条评论，318人围观）

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

相关阅读

相关 css美化滚动条

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

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

相关滚动条样式

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

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

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

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

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

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

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

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

相关滚动条样式

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

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

相关 Angular 滚动条 angular-nice-bar

angular-nice-bar 详细介绍一个轻量级的Angular scrollbar. Install bower install angular-ni

╰半橙微兮°/ 2022年05月20日 09:47/ 0 赞/ 173 阅读

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

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

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

相关 angular7中使用swiper轮播图插件

swiper中文官网 https://www.swiper.com.cn/ 安装插件 npm / cpm npm install swiper --s

悠悠/ 2021年10月18日 21:56/ 0 赞/ 533 阅读

相关 element ui 滚动条插件

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

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

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

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

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