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

Question

我希望我的导航栏具有粘性并在滚动时加载 logo-variation。因此，我在滚动和设置样式时通过 EventListener 添加了一个 class scrolling-active 到我的 header。在我添加一些 CSS 以防止在移动设备 x-axis 上滚动 .

之前，它工作正常

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

直到现在我唯一能找到的是：这似乎是 html 和 [=20 上的 overflow-x: hidden 的问题=]-tag – 我需要它适合设备上的 mobile-screen。我真的很感激任何提示！

滚动时添加class：

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

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

CSS 以防止在移动设备x-axis 上滚动。

html, body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

那是我的 header，包括导航（打开叠加层的汉堡菜单）：

<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 用于 header 和 .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;}

Answer 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;
}

所以现在两者都有效——内容调整移动设备的大小以适应屏幕，滚动导航工作可靠。

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

Fixed navigation on scroll doesn't work reliable because of CSS overflow-x: hidden

html

css

jquery

scroll