html - scroll-snap-type 和 scroll-snap-align 在 Firefox 上不起作用，为什么？

Question

在下面的代码片段中，当按下按钮时，会插入相应的数字，现在当出现溢出时，滚动条会捕捉到末尾以显示当前插入的数字，这在 Chrome 上工作正常，但对 Firefox 没有影响。

根据MDN scroll-snap-type和scroll-snap-align两者都受Firefox支持，但它仍然不起作用，我哪里出错了请帮忙。

const scrollbar = document.querySelector(".scrollbar");

const btns = document.querySelectorAll(".btn");

btns.forEach(function (el) {
    el.addEventListener("click", function () {
        scrollbar.innerText += this.innerText;
    });
});

.container {
    text-align: right;
    height: 50px;
    width: 200px;
    font-size: 1.5rem;
    font-family: cursive;
    background: steelblue;
    color: whitesmoke;

    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.scrollbar {
    display: inline-block;
    scroll-snap-align: end;
}

<div class="container">
    <div class="scrollbar"></div>
</div>
<button class="btn">1</button>
<button class="btn">2</button>

标签： htmlcssfirefoxmozilla