Возможно ли программно заблокировать прокрутку

Question

Я пишу сетку данных с ленивой загрузкой, и по какой-то причине мне нужно прекратить прокрутку, когда пользователь достигает области без данных, чтобы загрузить ее. Я хотел бы знать, как я могу остановить прокрутку на странице из моего кода. я пытался e.preventDefault, return false из обработчика событий и это решение также почти рабочее решение.

Но проблема в том, что все решения на самом деле не блокируют прокрутку, просто имитируют ее. например, я хочу заблокировать прокрутку, когда user прокрутить до 5000px

$(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://stackru.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;
}

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;
}

<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>

это решение практически работает, кроме случаев, когда пользователь использует scrollbar или же wheel-click прокрутки. например, не работает вариант использования, я хочу, чтобы прокрутка была остановлена ​​при достижении предела (в примере 5000px) и разрешить прокрутку после некоторого события. Является ли это возможным?

ОБНОВИТЬ
Собственно вопрос в том, как остановить прокрутку во время примера прокрутки. Прокрутка была отключена, когда пользователь достиг 5000px, но current scrolling process не остановился И я хотел бы знать, возможно ли остановить прокрутку в процессе, другими словами, как остановить прокрутку в примере, когда позиция становится больше, чем 5000px (изменить цвет в заголовке на red)

Answer 1

Добавить класс

.stop-scrolling{
overflow : hidden;
}

когда вам нужно остановить прокрутку страницы

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

и когда вы захотите включить его снова:

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

ИЛИ сделайте то же самое, что и ниже, без добавления какого-либо класса:

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

Answer 2

Хорошо, я вижу. Затем, чтобы отключить полосу прокрутки, вы должны попробовать,

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

Затем, чтобы отменить прокрутку колесика мыши, попробуйте,

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

  evt.preventDefault(); 
  return false; 

}, false);