Chrome 在打开隐藏元素时将内容向左移动，在关闭元素时不返回内容

Question

这是我的第一个问题，我经常使用这个网站来回答，所以希望更多地参与其中。

我有一个奇怪的Chrome/CSS相关问题。在我建立的网站上，有一个隐藏的菜单，当你打开它时，它非常庞大。

问题是，如果您在Chrome上并且没有初始滚动条，如果您打开菜单并且需要滚动条，它会向左移动所有内容，

但是当您关闭菜单并且滚动条消失时，正文内容向后移动，但网站标题保持在左侧。

我添加了屏幕截图来演示这一点。我无法访问网站页面，因为它上有敏感的业务数据。

初始页面加载：我只能添加 2 个链接，因为没有足够的积分！:(此图像与"菜单已关闭"图像相同，但全部对齐。

菜单打开：这里的菜单是打开的，背景是深色的

菜单已关闭：菜单现已关闭，您可以看到对齐方式现已关闭。您可以看到右上角的背景白色发生了偏移。

这是 CSS 的一个基本示例：

<div class="topbar">
    <div class="container">
        <div class="row">
            <div class="visible-xs col-xs-3">
                <a href="#" class="menu-option mobile menu-toggle"><i class="icon-handle"></i></a>
            </div><!--col-->
            <div class="col-xs-6 col-sm-4">
                <a href="/" class="topbar-logo">
                    <img src="/images/logo.png" alt="">
                </a>
            </div><!--col-->
            <div class="visible-xs col-xs-3"></div><!--col-->
            <div class="clearfix visible-xs"></div>
            <div class="col-xs-2  no-padding-right visible-xs">
                <div class="page-title mobile">
                    <h1>TEST</h1>
                </div>
            </div><!--col-->
            <div class="col-xs-10 col-sm-push-4 col-sm-3 hidden-xs">
                <div class="topbar-block dealership">
                    TEST
                </div><!--topbar-block-->
            </div><!--col-->
            <div class="col-xs-10 col-sm-push-4 col-sm-3 visible-xs no-padding-left">
                <div class="topbar-block dealership">
                    <span class="topbar-block-smalltext">TEST</span>
                </div><!--topbar-block-->
            </div><!--col-->
            <div class="clearfix visible-xs"></div>
            <div class="col-xs-6 col-sm-pull-3 col-sm-2">
                <div class="topbar-block">
                    <span class="topbar-block-title">TEST Code</span>
                    <span class="topbar-block-bigtext">TEST</span>
                </div><!--topbar-block-->
            </div><!--col-->
            <div class="col-xs-4 col-sm-pull-3 col-sm-2">
                <div class="topbar-block">
                    <span class="topbar-block-title">Area</span>
                    <span class="topbar-block-bigtext"> 1-10 </span>
                </div><!--topbar-block-->
            </div><!--col-->
            <div class="col-xs-2 col-sm-1">
                <a href="/log-out.php" class="topbar-block">
                    <span class="topbar-block-title">Logout</span>
                    <i class="icon-padlock-closed topbar-block-icon"></i>
                </a><!--topbar-block-->
            </div><!--col-->
        </div><!--row-->
    </div><!--container-->
</div><!--topbar-->
<div class="mainmenu-spread">
    <div class="container spaced">
        <div class="row page-controls">
                <div class="col-xs-6 col-sm-2">
                    <a href="/api/auto-aimm-login.php?redirect=https://www.hyundaiaimm.co.uk/order-history/" class="menu-option" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="AIMM Marketing Fund"><i class="icon-moneybox menu-option-icon"></i> <span class="moneybox-text">= N/A</span></a>
                </div><!--col-->
                <div class="col-xs-6 col-sm-3">
                                            <a href="/golden-ticket/" class="menu-option golden-ticket-count">
                        <i class="icon-golden-ticket menu-option-icon"></i>
                        <span>
                            <span class="text-gold">748</span> GOLDEN TICKETS <span class="hidden-991">REDEEMED</span>
                        </span>
                    </a>
                </div><!--col-->
        </div><!--row-->
        <nav class="mainmenu">
            <h2 class="mainmenu-title">Navigation</h2>
            <div class="row">
            </div><!--row-->
        </nav><!--mainmenu-->
    </div><!--container-->
</div><!-- mainmenu-spread -->

顶部栏没有向后移动，但没有什么可以暗示为什么？是铬的东西吗？

我在谷歌上搜索了这个问题，但只有很多与 Chrome 滚动条投诉有关的东西，在这里也找不到任何东西。

任何帮助将不胜感激。

谢谢。

Answer 1

我实际上找到了答案。

对齐的解决方案是在菜单关闭时将 overflow：hidden; 添加到 .topbar。我不确定为什么这是修复程序，但它奏效了。我们还在内容比显示器和菜单打开更深的页面上体验了 doulbe 滚动条。为了对此进行排序，我们添加了显示：无;打开菜单时到主页内容。

如果有人看了这个并试图想出解决方案，谢谢！