绝对定位的侧边栏在打开时获得额外的保证金
Absolutely Positioned Sidebar gets extra margin on open
我正在使用 React 并制作了一个侧边栏，它在屏幕内外动画但绝对位置和更改 css right of div。 Here 是一个用于轻松调整代码的沙箱。
所以当你点击蓝色框时，它应该通过将 right 设置为负值而离开屏幕，而粉红色框应该通过将 right 设置为 0 而出现。如您所见，这不起作用。
但是
如果您删除 popout.tsx 中的整个 useEffect 代码，那么一切都会按预期进行。
useEffect 代码负责根据 isOpen 状态聚焦和模糊侧边栏上的文本输入。
谢谢！
编辑
如果您想查看预期行为，请注释掉文件 popout.tsx 中的整个 useEffect。这是预期的行为，粉红色框出输入焦点粉红色框消失输入模糊。
整个事情的想法是，由于那个或使用键绑定，蓝色框会点击我的文本和粉红色框打开。这两个动作都应该关注里面的文本输入。
一些额外信息
如果你按下 ctl + ~ 还有一个键绑定，粉红色框出现，这就是为什么我必须根据 isOpem 状态而不是单击事件更改焦点。
问题是，您需要使用 position: fixed 而不是 position: absolute。
我正在使用 React 并制作了一个侧边栏，它在屏幕内外动画但绝对位置和更改 css right of div。 Here 是一个用于轻松调整代码的沙箱。
所以当你点击蓝色框时，它应该通过将 right 设置为负值而离开屏幕，而粉红色框应该通过将 right 设置为 0 而出现。如您所见，这不起作用。
但是
如果您删除 popout.tsx 中的整个 useEffect 代码，那么一切都会按预期进行。
useEffect 代码负责根据 isOpen 状态聚焦和模糊侧边栏上的文本输入。
谢谢！
编辑
如果您想查看预期行为，请注释掉文件 popout.tsx 中的整个 useEffect。这是预期的行为，粉红色框出输入焦点粉红色框消失输入模糊。
整个事情的想法是，由于那个或使用键绑定，蓝色框会点击我的文本和粉红色框打开。这两个动作都应该关注里面的文本输入。
一些额外信息
如果你按下 ctl + ~ 还有一个键绑定，粉红色框出现，这就是为什么我必须根据 isOpem 状态而不是单击事件更改焦点。
问题是，您需要使用 position: fixed 而不是 position: absolute。