Js-Dom之scrollTop

[kekobin]

写在前面

说到scroll，真的是有一肚子草泥马飘过呀，被坑过了许多次，感觉没法再爱了。。。而和它相关且常见的问题就是下面这货了:
scrollTop总是为0?

这里，会通过原理加例子的方式详述它们的用法和实际的应用场景。

scrollTop总为0

这个问题最常见的是在开发聊天窗的场景，即:当聊天的内容高度超过聊天容器时，内容应该自动往上滚动到显示最新的聊天消息。

首先给出我们的dom结构如下:

<div id="chatContainer">
    <ul id="listWrap">
    </ul>
</div>

固定宽高的聊天容器和聊天信息的包裹层，当消息不断插入到listWrap中时，ul的高度会越来越高，最终超过容器出现滚动条，此时我们发现滚动条默认会跟随聊天内容进行高度的变化，但是不会自动往上滚，这就是需要我们手动去处理的地方。

注：包裹层如果设置了 overflow:hidden，则scrollTop总是为0的。这里说的非这种情形 。

思路一：每插入一条聊天信息后，重新设置listWrap的scrollTop值

我们首先想到的就是更新listWrap的scrollTop值,即让它往上滚动适当的距离，那么下面留下的自然就是最新的内容了。这样子可行么？我们来验证下:

const cc = document.querySelector('#chatContainer');
const lw = document.querySelector('#listWrap');
let i = 0;
// 每隔1s向listWrap插入一个li，模拟一条消息
setInterval(() => {
	const li = document.createElement('li');
	li.innerHTML = `aa-${i++}`;
	lw.appendChild(li);
	// 获取容器和ul高度
	const cch = parseInt(window.getComputedStyle(cc, null).height);
	const lwh = parseInt(window.getComputedStyle(lw, null).height);

	// 当ul高度大于容器高度时，重设ul的scrollTop
	if(cch < lwh) {
		lw.scrollTop = lwh - cch;
		console.log(lw.scrollTop);
	}
}, 1000)

我一开始也以为这个就是答案了，直到运行这段代码的时候，发现打印出来的结果如下:

哇！太奇怪了，居然一直是0。明明ul的高度都变化啦，为什么没任何效果？
可能你也遇到过这种问题，然后陷入在这种苦涩中久久不能自拔。
让我们仔细的回到我们问题的起点: 我们想设置scrollTop是为了解决什么呢？
对，为了解决滚动条出来时能自动往上滚动，显示最新的内容。
让我们好好想想：这个滚动条是哪里来的，由谁产生的？能让它往上滚动的必然是直接控制它的元素，那么是谁控制它的呢？
你可能会说"不就是这里的ul么"，我一开始也一直这么认为的，然后事实并不是。那不会是容器吧？

思路二：每插入一条聊天信息后，重新设置chatContainer的scrollTop值

究竟是不是这种猜测呢，直接用代码去验证吧:

cc.scrollTop = lwh - cch;

很简单，就是只改了一条语句而已。浏览器运行后，惊人的发现生效了，内容超过容器后自动的往上滚动了。
其实，仔细想想还是能发现一些眉目的：就像整个页面内容超出了body高度时body容器产生滚动条，这里也是同样的道理。即内容本身并不产生滚动条，产生滚动条的是它的父级容器。所以，当出现内容超出容器需要滚动到最新内容时，无论是对一般的容器，还是body，都需要对容器或body设置scrollTop.一般的公式如下:

container.scrollTop = listContent.height - container.height;

完整例子参考 scrollTop.html