将右 属性 设置为 -100% 使正文水平滚动

Question

我使用 tailwind 制作了一个导航栏。对于移动设备，我将宽度设置为 -100%（以便我可以应用从右到左的过渡）。问题是当我这样做时布局中断，我可以轻松地水平滚动（以及屏幕 < 650px 中的任何其他用户）。

我试过这样做：

html, body {
        overflow:-moz-scrollbars-horizontal;
        overflow-x:hidden;
        overflow-y:scroll;
    }

而且它不起作用。我在 Chrome 并希望它与所有浏览器兼容。

这是我的导航栏代码：

//toggle nav
        const menu = document.querySelector('.menu');
        const menuWrapper = document.querySelector('.menu-wrapper');

        menu.addEventListener('click',() => {
            if(menu.classList.contains('fa-bars')) {
                menu.classList.remove('fa-bars')
                menu.classList.add('fa-times')
                menuWrapper.style.right = 0;
            } else {
                menu.classList.add('fa-bars')
                menu.classList.remove('fa-times')
                menuWrapper.style.right = "-100%";
            }
        })

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<header>

        <nav class="flex items-center py-5 shadow-md justify-between px-5 md:px-8 lg:px-10">
            <div>
                <img src="https://www.freeiconspng.com/thumbs/blogger-logo-icon-png/blogger-logo-icon-png-10.png" width="45px" height="45px" />
            </div>
            <ul class="md:flex items-center justify-between hidden">

                <div class="flex items-center gap-x-10">
                    <li>
                        <a href="" class="nav-link">Trending</a>
                    </li>
                    <li>
                        <a href="" class="nav-link">Latest</a>
                    </li>
                    <li>
                        <a href="" class="nav-link">Explore</a>
                    </li>
                </div>

            </ul>

            <div class="hidden md:flex gap-x-8 items-center">
                <div class="flex gap-x-5 font-bold text-gray-500 items-center">
                    <i class="fas fa-search cursor-pointer"></i>
                    <div class="flex gap-x-2 items-center">
                        <span class="cursor-pointer hover:text-green-600 hover:underline transition">Login</span>
                        <span>|</span>
                        <span class="cursor-pointer hover:text-green-600 hover:underline transition">Sign Up</span>
                    </div>
                </div>
                <button type="button" href="" class="btn btn-primary py-2 px-6">Write</button>
            </div>

            <div class="flex md:hidden justify-end text-2xl cursor-pointer">
                <i class="fas fa-bars menu"></i>
            </div>
        </nav>

        <!-- visible on mobile -->
        <div class="bg-white z-20 w-full h-full absolute top-14 -right-full z-50 py-20 menu-wrapper transition-all duration-500 ease-in-out menu-wrapper">
            <ul class="mx-auto flex flex-col justify-center items-center">
                <div class="flex gap-y-10 flex-col justify-center items-start text-gray-900">
                    <li class="flex gap-x-5 items-center">
                        <i class="fas fa-fire font-bold text-2xl"></i>
                        <a href="" class="nav-link text-xl">Trending Articles</a>
                    </li>
                    <li class="flex gap-x-5 items-center">
                        <i class="fas fa-chevron-down font-bold text-xl"></i>
                        <a href="" class="nav-link text-xl">Latest News</a>
                    </li>
                    <li class="flex gap-x-5 items-center">
                        <i class="fas fa-globe-americas font-bold text-2xl"></i>
                        <a href="" class="nav-link text-xl">Explore interests</a>
                    </li>
                </div>
                <div class="flex mt-20 gap-y-10 flex-col justify-center items-start text-gray-900">
                    <li class="flex gap-x-5 items-center">
                        <i class="fas fa-edit font-bold text-2xl"></i>
                        <a href="" class="nav-link text-xl">Write for us</a>
                    </li>
                    <li class="flex gap-x-5 items-center">
                        <i class="fas fa-lock font-bold text-2xl"></i>
                        <a href="" class="nav-link text-xl">Login</a>
                    </li>
                </div>
            </ul>
        </div>

    </header>

您可以 运行 代码片段并查看这些滚动条是如何出现的。即使它们是隐藏的，我也可以在我的笔记本电脑上用两根手指手动滚动它们。

我怎样才能避免这种情况？

Answer 1

您应该添加 right:100% 而不是 -100%