bootstrap-5 - 单击可滚动div中包含的Bootstrap复选框时如何防止页面滚动

Question

我正在尝试在 Bootstrap 5.x 中使用一些“切换按钮”复选框组件：

文档

我将一系列这些复选框放在一个 div 中。div 的最大高度为 500 像素，并且可以在 Y 轴上滚动。

示例（来自 Django 模板）：

<div class="multiselect-option-container">
    {% for choice in flag.options_dict %}
    <div>
        <input type="checkbox" class="btn-check" autocomplete="off" id="{{ flag.get_id }}.{{ choice.id }}">
        <label class="btn btn-outline-primary" for="{{ flag.get_id }}.{{ choice.id }}">{{ choice.text }}</label><br>
    </div>
    {% endfor %}
</div>

（其中 btn-check、btn 和 btn-outline-primary 都是 Bootstrap 类）

CSS：

.multiselect-option-container {
    border: 1px solid #666;
    max-height: 500px;
    overflow-y: scroll;
}

我遇到的问题是，如果我在可滚动 div 中向下滚动并单击其折叠下方的任何 Bootstrap 按钮，则单击可滚动 div 中的远下复选框按钮的动作会强制整个页面本身向下滚动，看起来如果复选框按钮不包含在可滚动的 div 中，则到页面位置。就好像它完全忽略了溢出。

有没有办法可以防止这种行为，以便我可以单击可滚动 div 内的这些按钮/复选框而不会强制任何错误滚动？

标签： bootstrap-5