Question

我已经构建了一个包含图像的全高内联块链接的页面 - 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块时添加一个模态 - 我的问题是我需要关闭teh倒转滚动，而theodod存在并在模态关闭后重新建立它 - 但我不知道如何扭转上面的鼠标轮javascript - 任何人都可以提供任何建议吗？

Answer 1

向您的事件监听器添加if以检查该模式是否已打开。如果是这样，什么也不做。如果没有，则运行代码。

Answer 2

将滚动值存储在变量

中

var storedScroll = null;    
$("body").mousewheel(function(event, delta) {
storedScroll = this.scrollLeft;
storedScroll -= (delta * 30);
}

然后使用storedScroll值滚动到原始位置。

希望有所帮助。

Answer 3

您可以做的是使用委托事件处理，那些不能使用scroll但使用mousewheel的人，并告诉我{{1}不应该调用事件回调有类html。然后在打开对话框时添加类modal-opened。也许在打开模态时已经有一个类添加到modal-opened，那么你可以重用该类。

＆＃13;

html

＆＃13;

$(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');
})

＆＃13;

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

<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); });函数删除mousewheel事件侦听器：

off

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

Javascript禁用反转滚动

3 个答案: