jquery smooth-scrollbar.js -全屏菜单打开时禁用滚动,菜单关闭时激活

vkc1a9a2  于 2022-11-29  发布在  jQuery
关注(0)|答案(2)|浏览(231)

如标题所示,我使用smooth-scrollbar.js沿着这个全屏菜单,目前当你点击按钮打开菜单时,你仍然可以滚动页面,我试图禁用滚动时,菜单是打开的,然后重新启用滚动时,菜单是关闭的。我一直在网上论坛上阅读,有人建议使用“滚动条。破坏()”但是我一直不能用这个来完成我所需要的,也许我用错了。
如果有人对如何完成这一点有任何建议,那就太好了!
第一个

erhoui1w

erhoui1w1#

我在这个例子中添加了一些css技巧,在body元素中添加了burgerOpen这个类

body.burgerOpen {
    overflow: hidden;
}

试用以下演示
第一个

ssm49v7z

ssm49v7z2#

import Scrollbar, { ScrollbarPlugin } from 'smooth-scrollbar';

 class ModalPlugin extends ScrollbarPlugin {
  static pluginName = 'modal';

  static defaultOptions = {
    open: false,
  };

  transformDelta(delta) {
    return this.options.open ? { x: 0, y: 0 } : delta;
  }
}

Scrollbar.use(ModalPlugin);

const options = {
  delegateTo: document,
  damping: 0.05,
  continuousScrolling: false,
};

const wrapper = document.querySelector('.wrapper');

const scrollbar = Scrollbar.init(wrapper, options);

并根据需要切换滚动条状态:

scrollbar.updatePluginOptions('modal', { open: false }); // true, false

相关问题