程序员：项目中的“滚动盒子”竟然还可以这样写

呵呵，本篇是笔者有感而写，基于笔者完成的两个vue项目中不同的【滚动盒子模型】完成方式。（说实话，在笔者尝试之前，也不知道这玩意到底应该怎么做…）
至于标题。。。

---

第一种方式：根据不同屏幕动态获取滚动盒子高度

其实“想让一个页面部分内容（某个div）发生滚动，只要让内容高度大于盒子高度即可”。

基于此，包裹滚动内容的div的高度就不能是自适应内容的高度，而是通过js获取的相对每个页面的“固定高度”，我们成为【滚动盒子高度】：

mounted(){
	//设置滚动盒子高度
	const leftpanels=document.querySelector('左边滚动盒子class/id')
	const rightpanels=document.querySelector('右边滚动盒子class/id')
	const bodyheight=document.documentElement.clientHeight
	leftpanels.style.height=bodyheight-底部状态栏高度+'px'
	rightpanels.style.height=bodyheight-底部状态栏高度+'px'
}

---

第二种方式：第三方插件“BetterScroll”的使用

先看下本来的代码结构：

<div class="list">
	<div class="area">
		<!-- 内容 -->
	</div>
	<div class="area">
		<!-- 内容 -->
	</div>
</div>

它和第一种情况有“本质的区别”。

其不能“滚动”的原因是笔者在css中设置了overflow:hidden

.list{
	overflow:hidden;
	position:absolute;
	top:1.58rem;
	left:0;
	right:0;
	bottom:0;
	/* ... */
}

在笔者“一筹莫展之际”，恩师告诉笔者可以用GitHub上的一个开源项目：better-scroll解决。
可以至链接处下载导入，也可以用npm：

npm install better-scroll --save

npm run start

其使用结构如下：

根据此，我们改进一下原先的代码结构：

<div class="list" ref="wrapper">
	<div>
		<div class="area">
			<!-- 内容 -->
		</div>
		<div class="area">
			<!-- 内容 -->
		</div>
	</div>
</div>

然后在<script>中引入：

import Bscroll from 'better-scroll'
export default{
	mounted(){
		this.scroll=new Bscroll(this.$refs.wrapper)
	}
}

---

关于better-scroll失效的一些问题

Better Scroll 静态数据超出屏幕后可以滚动, 但是如果开始内容没有超出容器, 后面数据更新并内容超出容器, 发现滚动无效
解决：这种就是常说的高度/宽度计算无效，常见解决方法：用$nextTick异步加载

隐藏切换显示。这样都会导致插件参数的scrollerHeight:0。此时需要加上click:true，使better-scroll支持点击事件，再调用下refresh(）重新渲染DOM就行了
解决：

this.$nextTick(()=>{
	if(!this.scroll){
		this.scroll=new Bscroll(this.$refs.xxx,{
			click:true
		});
	}else{
		this.scroll.refresh();
	};
});

层级出错
BS的基本结构是：一个wrapper层，一个content层。wrapper层是整个滚动页面占据的显示空间。content层则包含了全部的页面内容。
简单点说，就是：wrapper占住位置，content在wrapper里面滚动。
自然，创建BS对象的时候传入的dom也该是wrapper。同时，wrapper里面不能存在多级div，也就是说，所有内容都需要被包含在一个content中。