需求: 点击事件触发下面的div调转到顶端,由于想要置顶的内容在底部,需要填充一定内容物才能让scrollbar的效果出现。没什么特别的主要是计算和理解模型。
要点:
- 计算填充的内容物高度
- scrollbar滚动到指定位置
牵涉到到知识点:
盒子模型offsetHeight/clientHeight/scrollHeight/scrollTop

- offsetHeight/offsetWidth是包含外面一圈的,即包含border的宽度,如图中offsetWidth=border left + padding left + content+ padding right + scrollbar + border right
- clientHeight/clientWidth是padding在内的范围

- scrollHeight是在不出现scrollbar的情况下内容物的真实高度
MSDN: The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

scroll动态滚动
scrollTo scrollTop
scrollTop = scrollHeight可以强行把scrollbar拖到底
小知识点
虽然overflow: auto和overlay都能出滚动条,但是有那么些区别。stackoverflow上的一个回答:
The only difference is that overflow: overlay is only supported by -Webkit browsers, is non-standardized, and allows the content to extend beneath the scrollbar - whereas overflow: auto will not allow the content to extend beneath the scrollbar, if it appears it'll occupy the space required and shift the content accordingly (either vertically or horizontally).
也就是说overlay允许内容物撑大,而且是非标准的参数
问题
Edge和Chrome算出来总是那么不一样,Edge算出来长度比chrome长,就是那么一丢丢,看来还有地方需要改进