css - 解决出现滚动条时的画面跳转

Question

我有一个模态弹出窗口，当模态出现在屏幕上时，我用 overflow: hidden 消除了滚动条。

我正在使用 js 来计算滚动条的宽度，并添加一个 padding 来修复滚动条消失时的移动屏幕。像这样:

<div className='site-layout-wrapper' style={{'padding-right': modal ? `${scrollbarWidth}px` : '0'}}>

问题是当滚动条重新出现时也有轻微的偏移。我该如何解决？

Answer 1

不要使用 padding-right 因为滚动条的宽度取决于浏览器。您可以做的是将 container 设置为 overflow: scroll; 但将 content 设置为 overflow: hidden; .这将导致滚动条始终显示，但在模式打开时禁用滚动。

例子:

在你的.css中:

body {
    overflow-y: scroll;
}

.site-layout-wrapper.modal-active {
    overflow-y: hidden;
    max-height: 100vh;
}

在你的 .jsx 中:

<div className={`site-layout-wrapper ${modal && 'modal-active'}`}>