将 right 属性设置为 -100% 会使 body 水平滚动

Posted 2023-03-07

【中文标题】将 right 属性设置为 -100% 会使 body 水平滚动

【英文标题】：Setting the right property to -100% makes the body scroll horizontally

【发布时间】：2022-01-16 16:59:56

【问题描述】：

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

我试过这样做：

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"   />
            </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>

你可以运行代码 sn-p 看看这些滚动条是怎么来的。即使它们被隐藏，我也可以用笔记本电脑上的两根手指手动滚动它们。

如何防止这种情况发生？

【参考方案1】：

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

【讨论】：

知道了@Junaid Shaikh