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

posted @ 2019-03-12 02:18  Rocin  阅读(11723)  评论(0编辑  收藏  举报