javascript - 用于在页面上切换 CSS 溢出的 HTML 按钮元素

Question

正如标题所述，我想创建一个按钮来启用/禁用溢出：隐藏在页面中。并且默认状态应该是溢出：隐藏处于活动状态并且页面不能滚动。

我四处寻找类似的东西，没有找到任何东西。

编辑：

好的，这是我在您的帮助下所做的，无法将功能链接到按钮。我可能会错过了解某些内容，因为我在 html 和 Jquery 方面的技能有限。

经过一番研究，我通过让选择器选择一个 id 并给出了按钮和 id 来让它工作。

    $(function (){
   $("#buttoni").on('click', function(e){
      e.preventDefault();
      $('body').toggleClass('no-scroll');
   });
});

和按钮：

<button id="buttoni"> toggle scroll</button>

这样我就让它工作了，我不确定我在原版中误解了什么，所以不能让它工作，但谢谢

score 0 · Accepted Answer

怎么样

.no-scroll{
   overflow:hidden;
}

并将其应用于body

<body class="no-scroll">

并使用 jquery 切换它

$(function(){
   $('buttonid').on('click', function(e){
      e.preventDefault();
      $('body').toggleClass('no-scroll');
   });
});

1 回答 1