滾動事件上的 Bootstrap Collapse 元素

Question

我正在開發一個 Angular 應用程序並使用 Bootstrap 5.2。 我在卡片上使用Collapse組件，它可以完美地使用數據屬性。

但是，我想觸發滾動事件的折疊，目前我將卡片固定在屏幕頂部，當用戶開始滾動時，我希望卡片的主體折疊起來。 我能夠通過使用 Typescript 在元素上實例化折疊並刪除數據屬性並使用 Typescript 在單擊時切換折疊來實現這一點。

然而，此解決方案會產生一些不需要的副作用，例如在點擊離開時 offcanvas 項目仍然具有褪色的背景，以及在點擊時下拉元素不會彈出。

這就是我在卡片主體上實例化 Collapse 的方式

ngAfterViewInit(): void {
    this.target = document.getElementById('targetID');
    this.collapse = new Collapse(this.target, { toggle: false });
}

在這里，我正在檢測 srcoll 更改，如果用戶向下滾動 50px，則它會觸發折疊以隱藏，否則它必須顯示。

ngOnChanges(changes: SimpleChanges): void {
    if (changes.scrollEvent && changes.scrollEvent.currentValue !== changes.scrollEvent.previousValue) {
        this.show = this.scrollEvent.target.scrollTop <= 50;

        if (this.collapse) {
            if (this.show) {
                this.collapse.show();
            } else {
                this.collapse.hide();
            }
        }
    }
}

這是我正在折疊的 HTML 元素，它應該默認顯示。

<div class="collapse show" id="targetID">
    <div class="card-body rounded bg-white p-1">
        ...content...
    </div>
</div>

是不是我做錯了什么導致其他引導元素無法正常工作？ 或者有沒有辦法在滾動事件上切換具有數據屬性的折疊元素？

Answer 1

我在這里找到了解決我的問題的方法。 看來我使用的是已棄用的 Popper 版本。 我刪除了@types/bootstrap並使用@popperjs/core而不是popperjs 。 這解決了我遇到的所有沖突引導程序問題。