时间戳

首页 > 解决方案 > JQuery在功能中禁用单页滚动

javascript - JQuery在功能中禁用单页滚动

问题描述

在项目中我使用 jquery.onepage.scroll 插件。但是当我打开模态窗口并滚动时，页面也会向后滚动。我在插件的源文件中找到了 2 个位置：

1)

e(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function (t) {
    t.preventDefault();
    var n = t.originalEvent.wheelDelta || -t.originalEvent.detail;
    if (!e('body').hasClass('disabled-onepage-scroll')) u(t, n);
});

2) 

e(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function (e) {
    e.preventDefault();
    var t = e.originalEvent.wheelDelta || -e.originalEvent.detail;
    u(e, t);
});

如果我对此发表评论，则禁用滚动，但是如何使用另一个文件中的函数禁用它？例如，我有一个用于打开模式窗口的事件侦听器，当它打开时 -> 滚动被禁用

myModalEl.addEventListener('shown.bs.modal', function (event) {
    disableOnepageScroll();
});

myModalEl.addEventListener('hidden.bs.modal', function (event) {
    disableOnepageScroll();
});

标签： javascriptjqueryonepage-scroll

解决方案

所以，我只是添加了 if 语句来验证 body 是否具有“modal-open”类名。

1) 

e(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function (e) {
    e.preventDefault();
    var t = e.originalEvent.wheelDelta || -e.originalEvent.detail;
    if (!$(document.body).hasClass('modal-opened')) {
        u(e, t);
    }
});

2)

e(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function (t) {
    t.preventDefault();
    var n = t.originalEvent.wheelDelta || -t.originalEvent.detail;
    if (!$(document.body).hasClass('modal-open')) {
        console.log('AAAAA');
        if (!e('body').hasClass('disabled-onepage-scroll')) u(t, n);
    }
});

推荐阅读