Question

我正在尝试建立一个响应迅速的网站。几乎一切都很好，但是我不能解决这个问题。当我从移动设备打开导航栏时，它仍然允许我滚动页面。像这样：https://gyazo.com/3b58a7631bc3532ae979fdd81ab816d5

我尝试添加“ overflow-y：隐藏”；到CSS，但是根本没有帮助。

<ul class="nav-links" id="nyitas">
  <li><a class="btn btn4" style="color: white;">Hirdetés</a></li>
  <li><a href="index.html">Főoldal</a></li>
  <li><a style="cursor:pointer" onclick="openNav()">Kereső&#11167;</a></li>
  <li><a href="#">Hirdetések</a></li>
  <li><a href="#">Regisztráció</a></li>
  <li><a href="#">Bejelentkezés</a></li>
</ul>

和CSS：

@media screen and (max-width: 1280px){
  .nav-links{
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #272727;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    z-index: 10;
    overflow-y:hidden;
  }

Answer 1

我真的建议您使用包含这样的预定义响应元素的引导框架

https://getbootstrap.com/docs/4.0/examples/starter-template/

导航栏打开时锁定滚动

1 个答案: