代码之家 › 专栏 › 技术社区 › Roberto ZvjerkoviÄ sabithpocker

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

angular html jquery javascript

Roberto ZvjerkoviÄ sabithpocker · 技术社区 · 8 年前

Fiddle

因此,我试图在另一个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;   
    }
});

1 回复 | 直到 8 年前

Anonymous 8 年前

你为什么不这样做?

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>