Css 如何禁用侧导航上的滚动?

Css 如何禁用侧导航上的滚动?,css,Css,我想问 我有一个显示隐藏菜单(openNav、closeNav) 这是我的javascript: function openNav() { document.getElementById("mySidenav").style.width = "100%"; // document.getElementById("flipkart-navbar").style.width = "50%"; document.body.style.backgroundColor = "rgb

我想问

我有一个显示隐藏菜单(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;但不起作用

我试图更改溢出:可见或自动不工作

我尝试将位置更改为绝对或相对,但不适用于先生

卷轴仍在显示

这是我的截图:

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

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


谢谢你,你需要在js中瞄准溢出体元素。代码如下:

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";
}

有滚动条是最主要的问题,你的边栏内容太大,太宽或太高

试试下面的一种:

  • 添加
    溢出:隐藏至.sidenav:
  • 添加
    溢出:隐藏到sidenav的父元素
  • 添加
    右侧:0
    底部:0至.sidenav

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

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

    试一试


    试换高度:100%;底部:0;在CSS规则中,感谢先生回复@K K但不起作用先生,我尝试添加底部:0;不工作,滚动条仍然显示您可以为侧导航添加完整的标记和css吗?我们可以看到您的导航链接项目,因此也可以添加它们。您好,先生,感谢您的回复我尝试不工作,先生:(滚动条仍然显示感谢先生的回复,我尝试相同的先生,滚动条仍然显示,不工作:(虽然该代码可以回答该问题,但提供关于如何以及为什么解决该问题的附加上下文将提高答案的长期价值。
    Overflow:hidden;
    
    overflow: hidden;
    height:100vh;
    width: 100vh;