Vue - 讓水平滾動條(scroll bar)固定在瀏覽器的底部

效果

踩坑經歷

TLDR;
在幾個小時的google和stack overflow的苦苦搜索后，無果。
經過自我思考，想到了一種實現方法：
整個頁面是一個盒子，要出現滾動條，必然里面的元素要溢出。也即是，元素水平overflow，那么就出現水平滾動條。元素垂直overflow，那么會出現垂直滾動條。
我原先是將眼光放在局部的小盒子(如下圖)，無論我怎么調整display或者overflow，當這個局部的元素溢出的時候，滾動條是根據這個局部生成的。

那么我如果要把水平滾動條出現的時候固定在底部，我就要把眼光放在整個大盒子（全局）。
當大盒子里面的小盒子的元素溢出時，必然出現滾動條。

原理： flex布局在設置高度下，如果flex里面的內容大於這個高度或者寬度時，那么會溢出然后產生滾動條(垂直或者水平)。那么我就在Vue加載時，整個大盒子(這是class="main-container"， 也可以認為是網頁的body)的高度設置為viewport的高度。
為什么設置為viewport的高度？一是上述原因。再啰嗦一下，也即是我把整個flex布局的大盒子的面積設置為viewport的面積。如果不夠面積去承載元素（發生溢出），那么滾動條必然出現。而且有個前提是滾動條是貼着盒子的右下的邊。二是可以適應不同的設備。

具體實現： 在整個Vue初始加載的時候設置這個class="main-container"(flex布局的大盒子)的高度就好了。

代碼

    .main-container {
        display: flex;
    }    

    .body-container {
        display: flex;
    }

    export default {
        name: 'DefaultLayout',
        components: {
            MyHeader,
        },
        mounted: function () {
            this.$nextTick(function () {
                var div = document.querySelector('.main-container');
                div.style.height = window.innerHeight + 'px';
                console.log('mounted: ', div);
                console.log('mounted: ', window.innerHeight);
            })
        },
    };

解決瀏覽器縮放的時候，重新設置滾動條的位置

在mounted的時候監聽resize

        methods: {
            setScrollBar() {
                this.$nextTick(function () {
                    var div = document.querySelector('.main-container');
                    div.style.height = window.innerHeight - 10 + 'px';
                    console.log('mounted: ', div);
                    console.log('mounted: ', window.innerHeight);
                })
            },
        },
        mounted: function () {
            this.setScrollBar();
            // 瀏覽器縮放，更新ScrollBar位置
            window.addEventListener('resize', this.setScrollBar);
        },

注意

main-container是整個頁面
board-container是卡片那塊區域

div.style.height = window.innerHeight + 'px'; 這里有坑，要加px，不然無效。