如何使用jQuery解决设置overflow:hidden时页面内容跳动问题？

滚动条默认宽度通常为17px，但直接硬写这个值不够精准，最好让浏览器计算当前环境下的精确宽度再使用。

实现代码 #

// 计算浏览器滚动条的精确宽度
let scrollbarWidth = window.innerWidth - $(window).width();

// 需要触发点击操作时，执行以下代码避免内容跳动
$("body").css("overflow", "hidden");
$("body").css("padding-right", scrollbarWidth + "px");

逻辑说明 #

通过window.innerWidth（包含滚动条的窗口总宽度）减去$(window).width()（jQuery获取的不含滚动条的窗口内容宽度），得到当前滚动条的精确宽度。之后在需要隐藏滚动条的场景下，给body设置overflow: hidden隐藏滚动条，同时给body添加与滚动条宽度一致的右内边距，抵消滚动条消失后留出的空间，避免页面内容突然偏移跳动。

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