DOM

滚动中的宽度

详细讲解：https://javascript.info/size-and-scroll


box-sizing: border-box 且自定义滚动条的场景下，
左侧的视图获取元素宽为 300，滚动条(scrollBar)自定义width 8，滚动内容(innerWidth)width 604
盒模型下：width: 299, border-left: 1px

从上图已知 scrollWidth = innerWidth
从盒模型已知：width = viewPort + border = scrollBar + actualViewPort + border
从约定俗成的知识点中已知：scrollWidth = innerWidth
从盒模型已知：actualViewPort = clientWidth = viewPort - scrollBar = width - border - scrollBar

所以，普遍的 border-box 场景下
content(299) = scrollBar + actualViewPort
width = viewPort + border

scrollWidth = innerWidth = clientWidth + maxScrollLeft
scrollWidth = innerWidth = width - border - scrollBar + maxScrollLeft

maxScrollLeft = scrollWidth - clientWidth = innerWidth - clientWidth

maxScrollLeft = innerWidth - (width - border - scrollBar)

scrollWidth = innerWidth
clientWidth = actualViewPort
maxScrollLeft = innerWidth - (actualViewPort)
图形描述


滚动条渲染效果
FireFox
天生absolute，完美。也就是FireFox将滚动条作为了一个始终脱离文档流的元素，这样滚动条就始终不会影响布局了

而chrome则不会，始终占位，且影响布局

所以为了让滚动条不影响布局，可以使用自定义始终absolute的滚动条，但是其中的兼容要求较高，估计需要处理的边界条件，不比完美的wheel处理少。