vue 固定div 滚动_Vue - 让水平滚动条(scroll bar)固定在浏览器的底部

效果

踩坑经历

TLDR;

在几个小时的google和stack overflow的苦苦搜索后，无果。

经过自我思考，想到了一种实现方法：

整个页面是一个盒子，要出现滚动条，必然里面的元素要溢出。也即是，元素水平overflow，那么就出现水平滚动条。元素垂直overflow，那么会出现垂直滚动条。

我原先是将眼光放在局部的小盒子(如下图)，无论我怎么调整display或者overflow，当这个局部的元素溢出的时候，滚动条是根据这个局部生成的。

那么我如果要把水平滚动条出现的时候固定在底部，我就要把眼光放在整个大盒子(全局)。

当大盒子里面的小盒子的元素溢出时，必然出现滚动条。

原理： flex布局在设置高度下，如果flex里面的内容大于这个高度或者宽度时，那么会溢出然后产生滚动条(垂直或者水平)。那么我就在Vue加载时，整个大盒子(这是class="main-container"， 也可以认为是网页的body)的高度设置为viewport的高度。<