当better-scroll真的遇上angular_angular中betterscroll包-优快云博客

本文分享了在Angular项目中使用better-scroll的经验，通过html、less和ts文件的配置，解决遇到的滚动难题，包括子容器高度限制和类选择器应用的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于angular中如何使用better-scroll的资料是真滴少，自己尝试了大概有个3天，终于成功了。
别问了，照着做就完事了。

#  1、安装依赖
npm i better-scroll  --save

#  2、类型声明文件（好像可以不用装）
npm i @types/better-scroll -D

html文件如下

test.component.html

<div class="wrapper"  #wrapper>
	<div  class="scroll">
		当better-scroll真的遇上angular
	</div>	
</div>

样式文件(我用的是less)如下

test.component.less

.wrapper{
  width: 100%;  // 宽度无所谓了
  height: 100%; // 父容器的高度必须固定
  position: relative;
  display: block;
  overflow: hidden;
  .scroll {
     display: block;
    position: relative;
	width: 100%; // 宽度无所谓
    height: calc(100% + 1px); // 子容器的高度必须必父容器高，切记，官网有解析原因
	}
}

ts文件如下

test.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'
import BScroll from 'better-scroll'
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.less']
})
export class HomeComponent implements OnInit, AfterViewInit {
  @ViewChild('wrapper') scrollEl: ElementRef

  ngAfterViewInit() {
    const scroll: any = new BScroll(this.scrollEl.nativeElement, {
      click: true
    })
  }
}