Question

我的反应导航栏中的溢出 x 没有按预期工作。导航栏仅在单击汉堡包时才滑入，未单击时不显示。除了应该隐藏的溢出 X 继续滚动之外，一切都运行良好。尝试了一些东西，但还没有奏效。

这是 CodeSandbox 的链接

我的导航栏和我的 CSS 代码在下面。请帮我调查一下。

import React, { useState } from "react";
import { IconContext } from "react-icons";
import { MdMenu } from "react-icons/md";
// import { MdClose } from "react-icons/md";

export default function Navbar() {
    const[navLinkOpen, navLinkToggle] = useState(false)
    const handleNavLinksToggle = () =>{
        navLinkToggle(!navLinkOpen)
    }
    const renderClasses = () =>{
        let classes = "navlinks";
        if(navLinkOpen){
            classes += " active"
        }
        return classes;
    }
  return (
    <div>
      <div className="container">
     <nav>
     <div className="logo">
          <a href="/">Edie</a>
      </div>
      <ul className={renderClasses()}>
          <li className="link"> <a href="/">Home</a> </li>
          <li className="link"> <a href="/">Services</a> </li>
          <li className="link"> <a href="/">Our Works</a> </li>
          <li className="link"> <a href="/">Clients</a> </li>
          <li className="link"> <a href="/">Contacts</a> </li>
      </ul>
      <IconContext.Provider value={{ color: "#000000", size: "30px", className: "icon" }}>
      <div onClick={handleNavLinksToggle} className="hamburger-toggle">
          <MdMenu/>
      </div>
      </IconContext.Provider>
     </nav>
      </div>
    </div>
  )
}

CSS

@import url('https://fonts.googleapis.com/css2?family=Heebo&family=Poppins&display=swap');
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navlinks{
    display: flex;
    justify-content: space-evenly;
    width: 50%;
    align-items: center;
}

.logo{
    width: 70px;
    height: 53px;
}

.logo > a{
    font-family: 'Heebo', sans-serif;
    text-decoration: none;
    font-style: normal;
font-weight: 800;
font-size: 36px;
line-height: 53px;
color: #333333;
}

.navlinks > li > a{
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
font-size: 24px;
line-height: 36px;
color: #333333;
}

.hamburger-toggle{
    cursor: pointer;
    display: none;
}
@media screen and (max-width: 1024px){
    body{
       overflow-x:  hidden;
    }

    .hamburger-toggle{
        display: block;
    }

.navlinks{
    display: none;
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    height: 92vh;
    align-items: center;
    width: 100%;
    top: 10vh;
    background-color: red;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}
.active{
    transform: translateX(0%);
}

}

Answer 1

为此，您可以在全局 css 中为 html 和 body 使用相对位置和附加宽度。

解析标签的浏览器似乎只是忽略了 html 和 body 标签上的溢出属性。

关于全局 CSS

html, body{
    width: 100%;
    position: relative;
}

Overflow X Hidden 不适用于我的导航栏的移动设备

1 个答案: