Simplebar在Angular中集成失效，如何实现横竖双滚动？

Hey there! Let's fix that dual vertical + horizontal scroll issue with Simplebar in your Angular project. The problem likely stems from two key gaps: missing explicit container sizing and not properly initializing Simplebar within Angular's component lifecycle. Here's how to get it working step by step:

Step 1: Double-check Simplebar installation #

First, confirm you've installed the package via npm (if you haven't already):

npm install simplebar --save

Step 2: Update your component to manually initialize Simplebar #

Angular's DOM rendering lifecycle means the auto-initialization via data-simplebar often doesn't fire reliably. Instead, we'll initialize Simplebar after the view loads, and clean up the instance when the component is destroyed to avoid memory leaks.

Modify your app.component.ts like this:

import { Component, AfterViewInit, ElementRef, ViewChild, OnDestroy } from '@angular/core';
import SimpleBar from 'simplebar';
import 'simplebar/dist/simplebar.css';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, OnDestroy {
  name = 'Angular';
  private simpleBarInstance: SimpleBar | null = null;
  // Use a view child to target the scroll container
  @ViewChild('content') contentRef!: ElementRef;

  ngAfterViewInit() {
    // Initialize Simplebar with optional custom config
    this.simpleBarInstance = new SimpleBar(this.contentRef.nativeElement, {
      autoHide: false, // Keep scrollbars visible (adjust as needed)
      scrollbarMinSize: 20 // Set minimum scrollbar height/width
    });
  }

  ngOnDestroy() {
    // Clean up the instance to prevent memory leaks
    if (this.simpleBarInstance) {
      this.simpleBarInstance.destroy();
      this.simpleBarInstance = null;
    }
  }
}

Step 3: Adjust your HTML template #

Replace the data-simplebar attribute with a template reference variable (we'll use this to target the element in our component):

<div class="container" #content>
  <div class="big-width">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus nobis similique, temporibus eaque eum vel adipisci sed harum obcaecati animi praesentium consequatur sint consectetur iure accusantium explicabo voluptate perspiciatis nemo.
    <!-- Add extra content to trigger vertical scroll -->
    <br><br>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus nobis similique, temporibus eaque eum vel adipisci sed harum obcaecati animi praesentium consequatur sint consectetur iure accusantium explicabo voluptate perspiciatis nemo.
    <br><br>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus nobis similique, temporibus eaque eum vel adipisci sed harum obcaecati animi praesentium consequatur sint consectetur iure accusantium explicabo voluptate perspiciatis nemo.
    <br><br>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus nobis similique, temporibus eaque eum vel adipisci sed harum obcaecati animi praesentium consequatur sint consectetur iure accusantium explicabo voluptate perspiciatis nemo.
  </div>
</div>

Step 4: Add critical CSS styles #

Simplebar requires the container to have explicit dimensions and hidden overflow to function. Update your app.component.css:

.container {
  /* Fixed dimensions ensure content has room to overflow */
  width: 300px;
  height: 200px;
  /* Hide native scrollbars - Simplebar replaces these with custom ones */
  overflow: hidden;
  /* Optional: Add a border to visualize the container */
  border: 1px solid #ccc;
}

.big-width {
  /* Make content wider than the container to trigger horizontal scroll */
  width: 800px;
  /* Vertical scroll will activate if content height exceeds the container's 200px (we added extra content above) */
}

Why this fixes the issue: #

• Manual initialization guarantees Simplebar hooks into the element after Angular has finished rendering it.
• Explicit container sizing ensures the content can overflow, which triggers the scrollbars.
• Cleaning up the instance in ngOnDestroy prevents memory leaks in single-page Angular apps.

If you still see issues, verify the Simplebar CSS is loading correctly. As a fallback, you can add it directly to your angular.json styles array:

"styles": [
  "src/styles.css",
  "node_modules/simplebar/dist/simplebar.css"
]

内容的提问来源于stack exchange，提问作者3gwebtrain