Question

所以当另一个div可见时，我正在尝试禁用div的滚动。

我正在使用的代码就是这样，但只有在使用鼠标滚轮滚动时才会这样。

如果我单击滚动条并将其拖动，或者如果我对div进行聚焦并使用键盘向下按钮，则滚动仍然会发生。

为什么这样，我怎么能解决我的问题（可能没有在我的滚动条或类似的“黑客”上覆盖透明元素）？

$('#element').on('scroll mousewheel keydown keypress keyup', function (event) {
    const element = $(event.currentTarget);
    const shouldScroll = false;

    if (!shouldScroll) {
        event.preventDefault();
        event.stopPropagation();
        return false;   
    }
});

Answer 1

你为什么不这样做？

var scrollEnabled = true;
var scrollX = 0;
var scrollY = 0;

$(document).ready(function() {

  $('div.outer').on('scroll', function(event) {
    if (!scrollEnabled) this.scrollTo(scrollX, scrollY);
  });
  
  $('#tglBtn').on('click', function(event) {
    if (scrollEnabled == true) {
      scrollEnabled = false;
      scrollX = $('div.outer').scrollLeft();
      scrollY = $('div.outer').scrollTop();
    } else {
      scrollEnabled = true;
    }
  });
  
});

div.outer {
  height: 500px;
  width: 500px;
  background-color: red;
  overflow-y: scroll;
}

div.inner {
  height: 200px;
  width: 500px;
}

div.inner:nth-child(odd) {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="tglBtn" value="Enable/Disable scrolling" />
<div class="outer">
  <div class="inner">

  </div>
  <div class="inner">

  </div>
  <div class="inner">

  </div>
  <div class="inner">

  </div>
  <div class="inner">

  </div>
  <div class="inner">

  </div>
</div>

使用键盘箭头禁用元素滚动

1 个答案: