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

Question

Fiddle

所以我试图在另一个 div 可见时禁用 div 的滚动。

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

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

为什么会这样，我该如何解决我的问题(可能不需要在我的滚动条上覆盖透明元素或类似的“hacks”)？

$('#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>