单击标签时使用 Javascript 更改 body CSS

Question

我正在为一个朋友开发网站。我使用 off-screen CSS 菜单。调用菜单的按钮不是 HTML 按钮，它被列为输入和标签。

使用菜单时，您仍然可以在页面的主要 body 上滚动。我想禁用它。我能看到这是怎么可能的唯一方法是在单击菜单标签时更改 body CSS，但我已经做了几个小时但没有运气。我计划在打开菜单时将以下内容添加到 body class：

overflow: hidden;
position: static;

这是我最近登陆的 javascript，但无济于事。我已经尝试了很多，但是 HTML "onclick" 然后运行切换 body class 的脚本是我最好的理论。

HTML

<input data-function='swipe' id='swipe' type='checkbox' value="button"/>
<label data-function='swipe' for='swipe' onclick='noScroll()' value="button">&#xf0c9;</label>


<div class='sidebar'>
    <nav class='menu'>
        <li><a href='#'>Home</a></li>
        <li class='active'><a href='#'>About</a></li>
        <li><a href='#'>Imprint</a></li>
        <li><a href='#'>Imprint</a></li>
    </nav>

</div>

Javascript

noScroll({
    $('#swipe').toggleClass('body bodynoscroll');
    })

CSS

.body {
    font: 12px/1 'Open Sans', sans-serif;
    color: $c;
    background: $c;
    overflow-x: hidden;
}

.bodynoscroll {
    font: 12px/1 'Open Sans', sans-serif;
    color: $c;
    background: $c;
    overflow-x: hidden;
    overflow: hidden!important;
    position: static!important;
}

网站

https://www.brotherhoodgaming.net

感谢任何帮助！我对 javascript 很糟糕，所以我正在学习。

Answer 1

此代码应该有效：

$(document).ready(function(){
    $("#{your label id}").toggle(
        function(){$("body").css({"overflow": "hidden"});},
        function(){$("body").css({"overflow": "auto"});}

    );
});

Answer 2

无需更改 body css，只需启用禁用鼠标滚轮，如果这正是您想要的？试试这个...从我的旧项目中复制粘贴。

<script>
function stopWheel(e){
    if(!e){ e = window.event; }
    if(e.preventDefault) { e.preventDefault(); }
    e.returnValue = false;
}

function mousewhellStat(stat){
    if (stat) {
        document.onmousewheel = null;
        if(document.addEventListener){
            document.removeEventListener('DOMMouseScroll', stopWheel, false);
        }   
    } else {
        document.onmousewheel = function(){ stopWheel(); }
        if(document.addEventListener){
            document.addEventListener('DOMMouseScroll', stopWheel, false);
        }   
    }
}

$("#menubuttonlabel").click(function(){
     mousewhellStat(false);
})
$(".sidebar .menu li").click(function(){
    mousewhellStat(true);
    $(".sidebar").slideUp(300);
})
</script>

只需复制粘贴到您的页面即可。看看是否运作良好:)

Answer 3

为您的标签提供一个 ID 以将事件绑定到它。像这样：

<label id="menubuttonlabel" data-function='swipe' for='swipe' onclick='noScroll()' value="button">&#xf0c9;</label>

然后您的 JS 代码将如下所示：

$(document).on('click', '#menubuttonlabel', function(){
    if ($('body').css('overflow') == 'auto'){
          $('body').css("overflow", "hidden");
          }else{
              $('body').css("overflow", "auto"); 
          }   
});

单击标签时使用 Javascript 更改 body CSS

Use Javascript to change body CSS upon clicking a label

javascript

html

css

toggleclass