vue 固定div 滚动_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，不然无效。

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

vue 固定div 滚动_vue.js-div滚动条隐藏但有滚动效果的实现方法
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ r ...
vue 固定div 滚动_vue移动端导航吸顶（固定定位）页面滚动出现抖动
1-在页面中监听了滚动条,滚动到310px就固定定位了,添加类名的方式 handleScroll () { var scrollTop = window.pageYOffset || document ...
html select滚动轴,javascript - html select scroll bar - Stack Overflow
how do you add a scroll bar to the html select box? is there any javascript library that emulate thi ...
vue 修改div宽度_Vue 组件通信方式及其应用场景总结（1.5W字）
前言相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰.今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其 ...
vue之div让文字内容水平垂直居中
思想 ①让文字先垂直居中,再水平居中: ②若遇到文字和div一起水平垂直居中,则外面再套一个div,先让它俩都垂直居中,再内部处理文字水平居中. 代码 line-height: 100px; // 控 ...
vue 停止页面滚动_Vue禁止h5页面iOS浏览器下拉bounce效果
介绍 vue-disbounce是一款基于Vue.js的自定义组件,可以有效避免触发h5页面在ios浏览器内置的下拉bounce效果. 组件 :style="{'background-col ...
vue 修改div宽度_vue 拖动调整左右两侧div的宽度
原文是左中右三种情况的拖动.由于项目需要,我删除掉了右边的,直接左右区域拖动调整div宽度 1.拖动,调整左右两侧宽度西瓜备注2 西瓜备注2 export default { name: 'Da ...
js禁止苹果页面底部滚动_Vue.js 实现禁止 h5 页面在 ios 浏览器内置的下拉 bounce 效果...
介绍 vue-disbounce是一款基于Vue.js的自定义组件,可以有效避免触发h5页面在ios浏览器内置的下拉bounce效果. 组件 :style="{'background-col ...
html文本滚动到底后自动回到顶部,JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 DIV滚动至顶部后固定 Test Div function menuFixed(id) { var obj = document.getElementById(id ...
html5实现纵向滚动,【前端】如何让水平滚动区域的垂直滚动条固定在滚动区域的右边？...
1.问题描述题目可能一下子看不懂,下面这张图是我想实现的效果: 外部div中有一个水平滚动条,内部div中有一个垂直滚动条但是我必须把水平滚动条拉到最右边,才能看到垂直滚动条.而我想把垂直滚动条固 ...

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

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

最新文章

热门文章