Javascript 禁用反向滚动

Question

我已经构建了一个页面，该页面具有包含图像的全高度内联 block 链接 - div 水平滚动页面 - 这是 html -

 <section class="banner-cont">


                <a class="banner-block bnr-lad" href="#animatedLadies"><div class="txt"><h3>Ladies Day <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></h3></div><div class="trapper bn1"></div></a>
                <a class="banner-block bnr-g "><div class="txt"><h3>Grand Floral <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></h3></div><div class="trapper bn2"></div></a>
                <a class="banner-block bnr-gala animatedModalGala"><div class="txt"><h3>Gala Evening<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit </span></h3></div><div class="trapper bn3"></div></a>

                <div class="banner-block "><div class="txt"><h3>Show Gardens<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></h3></div><div class="trapper bn5"></div></div>
                <div class="banner-block "><div class="txt"><h3>Food <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></h3></div><div class="trapper bn6"></div></div>
                <div class="banner-block "><div class="txt"><h3>Entertainment <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit </span></h3></div><div class="trapper bn7"></div></div>

              </section>

我使用以下脚本反转鼠标滚动以滚动浏览页外图像:

$("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

一切都工作得很好，直到客户想要在单击每个 div block 时添加一个模态 - 我遇到的问题是，然后我需要在模态存在时关闭反向滚动，并在模态关闭后重新建立它- 但我不知道如何反转上面的鼠标滚轮 JavaScript - 任何人都可以提供任何建议吗？

Answer 1

您可以做的是使用委托(delegate)事件处理，它们不适用于 scroll 但适用于 mousewheel，并告诉在以下情况下不应调用事件回调: html 具有modal-opened 类。然后在对话框打开时添加modal-opened类。也许当模式打开时已经有一个类添加到 html 中，那么您可以重用该类。

$(document).on('mousewheel', 'html:not(.modal-opened) body', function(event, delta) {
  event.preventDefault();
  console.log('ok: ' + delta);
});


$(document).on('click', '.toggle-modal', function() {
  $('html').toggleClass('modal-opened');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

<button class="toggle-modal">
  toggel modal-open
</button>

另一种方法是使用命名空间来注册事件监听器

$(document).on('mousewheel.inverse-scrolling', function(event, delta) {
  event.preventDefault();
  console.log('ok: ' + delta);
});

并使用 off 函数删除 mousewheel 事件监听器:

$(document).off('mousewheel.inverse-scrolling')

然后在模式关闭后立即再次添加事件监听器。