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，不然无效。

转载于:https://www.cnblogs.com/allen2333/p/10514262.html