问题描述:页面首次加载的时候内容是一屏,不会出现纵向滚动条,但是当点击加载的内容更多时页面会出现左右跳动一下的情况。出现跳动的主要原因就是出现了滚动条,滚动条的宽度影响了内容区域的宽度。
1.查看导航条的宽度可以在控制台运行:window.innerWidth - document.body.clientWidth
window.innerWidth
浏览器可用宽度
document.body.clientWidth
body的宽度
Chrome浏览器,Firefox,IE的导航条宽度都是17px.
所以可以给内容区设置一个padding站位,padding-right:17px;这样页面就不会来回跳动了。
2.直接给body设置body { overflow-y: scroll; }