如何禁用sidenav上的滚动？

Question

我想问一下

我有一个show hide菜单（openNav，closeNav）

这是我的javascript：

function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
    // document.getElementById("flipkart-navbar").style.width = "50%";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.body.style.backgroundColor = "rgba(0,0,0,0)";
}

这是我的css脚本：

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    box-shadow: 0 4px 8px -3px #555454;
    padding-top: 0px;
}

我尝试添加overflow-y：hidden;但没有工作

我尝试更改溢出：可见或自动无法工作

我尝试将位置更改为绝对或相对而不是工作到先生

滚动仍显示

这是我的剧本：

从我的屏幕截图中看滚动条，滚动条显示不隐藏或禁用

如何隐藏或禁用滚动条先生？

之前感谢

Answer 1

你需要在js中定位溢出的body元素。以下是代码：

function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
    // document.getElementById("flipkart-navbar").style.width = "50%";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
    document.body.style.overflow = "hidden";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.body.style.backgroundColor = "rgba(0,0,0,0)";
    document.body.style.overflow = "auto";
}

Answer 2

滚动条主要是问题，您的侧边栏内容太大，太宽或太高。

尝试其中之一：

1. 将overflow: hidden;添加到.sidenav：
2. 将overflow: hidden;添加到sidenav的父元素
3. 将right: 0;和bottom: 0;添加到.sidenav

Answer 3

在侧边栏容器或侧边栏类中添加这些属性。

overflow-x: hidden;
overflow-y: hidden;

或

Overflow:hidden;

Answer 4

尝试

server {
  listen       80;
  server_name  api.dev.mysite.com;
  location / {
    proxy_pass http://127.0.0.1:5001;
  }
}