为什么在HTML Canvas下方添加小型div时会出现水平滚动条？

根本原因 #

水平滚动条是垂直滚动条挤占视口可用宽度导致的连锁反应，具体逻辑如下：

• 单独展示canvas时：你将canvas高度设为window.innerHeight，页面总高度刚好匹配视口高度，不会触发垂直滚动条。此时canvas宽度设置为window.innerWidth，刚好和视口宽度一致，没有水平溢出。
• 新增div元素后：页面总高度变为window.innerHeight + 50px，超出视口高度，浏览器自动渲染垂直滚动条。window.innerWidth的统计范围包含垂直滚动条本身的宽度，此时文档流的实际可用水平宽度已经变为innerWidth - 滚动条宽度，但你的canvas宽度还是按innerWidth设置，比可用宽度宽出了一个滚动条的宽度，最终触发水平滚动条。

验证逻辑 #

你可以通过简单测试确认：将canvas的高度设置为window.innerHeight - 100，再新增div时页面总高度不会超过视口，不会出现垂直滚动条，此时水平滚动条也不会同步出现。

更合理的解决方案 #

除了设置overflow-x: hidden，你也可以选择以下方案避免问题：

• 计算canvas宽度时使用document.documentElement.clientWidth，该属性统计的是不含滚动条的文档可用宽度，不会受滚动条是否出现的影响
• 给html元素设置overflow-y: scroll，让垂直滚动条常驻，初始化canvas宽度时就已经扣除了滚动条占用的宽度

内容的提问来源于stack exchange，提问作者user17473907