由于 CSS overflow-x: hidden 修复了滚动导航不可靠的问题

Posted 2023-05-08

【中文标题】由于 CSS overflow-x: hidden 修复了滚动导航不可靠的问题

【英文标题】：Fixed navigation on scroll doesn't work reliable because of CSS overflow-x: hidden

【发布时间】：2021-03-04 05:41:28

【问题描述】：

我希望我的导航栏具有粘性并在滚动时加载徽标变体。因此，在滚动和设置样式时，我通过 EventListener 在标题中添加了一个类scrolling-active。在我添加了一些 CSS 以防止在移动设备上沿 x 轴滚动之前，它运行良好。

添加 CSS 后，scrolling-active 只是在滚动过程中不时添加。无论我在哪个网站上，即使没有重新加载，它有时也能正常工作，有时不能。只需向上滚动到标题并再给向下滚动一次机会，就可以让它工作。

到目前为止，我唯一能发现的是：这似乎是html 和 body-tag 上的 overflow-x: hidden 的问题——我需要适合设备上的移动屏幕。 我真的很感激任何提示！

滚动时添加类：

jQuery(document).ready(function($)
    window.addEventListener('scroll', function() 
        var header = document.querySelector('header');

        header.classList.toggle('scrolling-active', window.scrollY > 0);
    );

用于防止在移动设备上沿 x 轴滚动的 CSS。

html, body

    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;

这是我的标题，包括导航（打开覆盖的汉堡菜单）：

<header id="masthead" class="site-header">

    <div class="navbar navbar-light">
    
        <div class="float-left">            
            <div class="site-branding">
                <?php the_custom_logo(); ?>
            </div>
            <!--Sticky logo-variation -->
            <div class="site-branding-alternative">
                <?php 
                $sticky_logo_url = get_theme_mod( 'sticky_header_logo' );
                if ($sticky_logo_url )?>
                    <a href="<?php echo home_url(); ?>">
                        <?php echo '<img src="'.$sticky_logo_url.'" alt = "logo alt test" class="sticky_logo_class custom-logo">'; ?>
                    </a>
            </div>
        </div><!--float-left-->

        <!--Toggler for menu works fine-->
        <div class="menu float-right">
            …               
        </div>

    </div><!--.navbar-->
    

    <!--Overlay – getting WP-menus – works fine-->
    <div class="menu-overlay">
        …
    </div>

</header><!-- #masthead -->

这就是用于标题的 SASS 和 .scrolling-active:

header 
    background: transparent;
        img.custom-logo 
            width: auto;
            max-height: 56px;
            @media (min-width: 992px) 
                max-height: 72px;
            
            @media (min-width: 1200px) 
                max-height: 88px;
            
        
     

#masthead 
    width: 100%;
    z-index: 100; //Make it float above all other elements
    height: 88px; //Gives us a reference point for the final thing


/*Navigation on scroll*/
.scrolling-active 
    background: $color_primary_red;
    position: fixed;
    height: 80px;
    width: 100%;
    

.site-branding-alternative 
    display: none;


.scrolling-active .site-branding-alternative 
    position: absolute;
    top: 0;
    padding-top: 0.5rem;
    display: inline-block;


.scrolling-active .site-branding img display: none;

【参考方案1】：

我终于找到了解决方案，并想与您分享——听起来很简单，但我还是花了很长时间才找到……

我只需要从body 中删除overflow-x: hidden 并添加overflow-wrap: break-word 以防止主体在移动设备上沿y 轴滚动。

html
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;


body
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-wrap: break-word;

所以现在两者都可以工作 - 内容会根据移动设备屏幕调整大小，并且滚动导航工作可靠。