vue监听浏览器窗口的变化，随着窗口变化调整滚动容器高度

组件

<template>
<div class="scroll-bar-box" :style="{height:styles.height,padding:styles.padding}">
<slot></slot>
</div>    
</template>
<script>
export default {
    name:'my-scroll-bar',
    data(){
        return{            
        }
    },
    props:{
        styles:Object
    }
}
</script>
<style scoped>
.scroll-bar-box{
    overflow-y: auto;
}
.scroll-bar-box::-webkit-scrollbar {/*滚动条整体样式*/
        width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
.scroll-bar-box::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         -webkit-box-shadow: inset 0 0 3px #afb2b8;
        background: #afb2b8;
    }
.scroll-bar-box::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }
</style>

应用

<template>
	<my-scroll-bar :styles="{height: fh +'px'}" ref="filterWrap">
	</my-scroll-bar>
</template>

export default {
	import MyScrollBar from './scrollbar'
  	components: { MyScrollBar },
	data() {
		return {
		 filterWrapHeight : null
		}
	},
	mounted() {
		let th = 205
		let wh = window.innerHeight;
	    window.onresize =()  =>{
	        return (()=>{
	          wh = window.innerHeight
	          this.filterWrapHeight  = wh-th
	        })()
	    }
	},
}