Question

我使用延迟加载编写datagrid，出于某种原因，我需要停止滚动，当用户实现没有数据的区域时，加载它。我想知道如何停止在我的代码页面上滚动。我在事件处理程序中尝试了e.preventDefault，return false，该解决方案也almost working solution。

但问题是所有这些解决方案实际上都不会阻止滚动，只是模仿它。例如我希望在user向上滚动到5000px

时阻止滚动

＆＃13;

$(function() {
  var container = $(".container");
  var info = $(".info > .position");

  container.scroll(function(e) {
    var topPosition = container.scrollTop();
    if (topPosition >= 5000) {
      disableScroll();
    }
    info.text("scrollTop: " + topPosition);
  });

  $(".info > .disable").click(disableScroll);
  $(".info > .enable").click(enableScroll);
});

/*
 * Code from solution which was mentioned above
 * https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
 */
const keys = {
  37: 1,
  38: 1,
  39: 1,
  40: 1
};

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
    e.preventDefault();
  e.returnValue = false;
}

function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

function disableScroll() {
  $(".info > .state").text("Disable");
  if (window.addEventListener) // older FF
    window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove = preventDefault; // mobile
  document.onkeydown = preventDefaultForScrollKeys;
}

function enableScroll() {
  $(".info > .state").text("Enable");
  if (window.removeEventListener)
    window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.onmousewheel = document.onmousewheel = null;
  window.onwheel = null;
  window.ontouchmove = null;
  document.onkeydown = null;
}

＆＃13;

html,
body,
.page {
  overflow: hidden;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.header {
  box-sizing: border-box;
  position: fixed;
  padding: 0 15px;
  display: table;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
}

.info {
  background-color: #cdcdcd;
  border: 1px dashed blue;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  margin: 0 15px;
  height: 50px;
}

.container {
  height: calc(100% - 60px);
  width: calc(100% - 30px);
  margin: 60px 15px 0 15px;
  box-sizing: border-box;
  border: 1px solid red;
  overflow: auto;
}

.content {
  height: 100000px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
  <div class="header">
    <div class="info">
      |<label class="position">Initial</label> |
      <label class="state">Enable</label>

      <button class="enable" type="button">Enable</button>
      <button class="disable" type="button">Disable</button>
    </div>
  </div>

  <div class="container">
    <div class="content">
    </div>
  </div>
</div>

＆＃13;

除了用户使用scrollbar或wheel-click滚动的情况外，它的解决方案几乎可以正常工作。例如not working use case我希望滚动在达到限制时停止（在示例中为5000px）并允许在某个事件后滚动。有可能吗？

更新
实际上问题是如何在滚动example期间停止滚动。当用户达到5000px时，滚动已停用，但current scrolling process没有停止。我想知道是否可以停止正在进行滚动，换句话说，当位置变得大于5000px时，如何在示例中停止滚动（将标题中的颜色更改为red）

Answer 1

好的，我明白了。然后要禁用滚动条，你应该尝试，

$("body").css("overflow", "hidden");

然后取消鼠标滚轮你应该尝试，

document.addEventListener("mousewheel", function(evt){

  evt.preventDefault(); 
  return false; 

}, false);

Answer 2

添加课程

.stop-scrolling{
overflow : hidden;
}

当您需要停止在页面上滚动时

$('html').addClass('stop-scrolling');

如果您想再次启用它：

$('html').removeClass('stop-scrolling');

或者在不添加任何类的情况下执行相同的操作：

$('html').css('overflow','hidden');
$('html').css('overflow','auto');

是否有可能以编程方式阻止滚动

2 个答案: