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

标签 javascript jquery html css overflow

如标题所述,我想创建一个启用/禁用溢出的按钮:隐藏在页面中。并且默认状态应该是 overflow:hidden 处于事件状态并且页面无法滚动。

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

编辑:

好的,这就是我在您的帮助下所做的,在将功能链接到按钮时遇到问题。由于我在 html 和 Jquery 方面的技能有限,我可能无法理解某些东西。

经过一些研究后,我通过让选择器选择一个 id 并提供了按钮和 id 来让它工作。

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

和按钮:

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

这样我就可以正常工作了,我不确定我在原版中误解了什么导致它无法正常工作但是谢谢

最佳答案

怎么样

.no-scroll{
   overflow:hidden;
}

并将其应用于body

<body class="no-scroll">

并用 jquery 切换它

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

关于javascript - 用于在页面上切换 CSS 溢出的 HTML 按钮元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16233312/

相关文章:

javascript - Bootstrap 可折叠面板不折叠

javascript - select2验证非空值发送

javascript - 使用过渡时 Bootstrap 列为空

javascript - 原型(prototype)数组中 undefined variable

javascript - 使用javascript在表格中显示关联数组的数据

javascript - 如何从 Promise 返回值并在另一个方法中使用它?

javascript - 我们可以获得 jQuery Chosen 插件的最后一个未选择的值吗?

css - 如何在特定div中设置2种不同的超链接样式

html - 如何在不留空白的情况下更改 div 的上边距?

javascript - 悬停文本并显示 html 表格