Is it possible programatically block scrolling

Question

I write datagrid with lazy loading, and for some reason I need stop scrolling, when user achieve area without data, to load it. I'm would like to know how I can stop scrolling on page from my code. I have tried e.preventDefault, return false from event handler and that solution also almost working solution.

But problem is all of that solutions actually don't block scrolling, just emulate it. e.g. I want to block scrolling when user scroll up to 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://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;
}

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>

it solution almost work, except cases when user use scrollbar or wheel-click scrolling. e.g. not working use case I want scroll will be stopped when achieve limit (in the example 5000px) and allow scrolling after some event. Is it possible?

UPDATE
Actually question is how to stop scrolling during scrolling example. Scrolling was disabled when user achieve 5000px, but current scrolling process didn't stopped. And I would like to know is is possible to stop scrolling in progress i.e. in other words how to stop scrolling in the example when position become greater than 5000px (change color in header to red)

I want to ask why you are doing this. If the issue is that the table is not loaded below that point then presumably there is no more page to scroll to anyway and the scrolling will stop because the bottom of the table is the bottom of the page. If there is more page below that point then why are you stopping people from being able to scroll to it? If you have more page that you dont want people to scroll to then remove it? — Bijan Rafraf, Nov 08 '17 at 11:13
you should check this out [Disable Scrolling](https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily) — imanshu15, Nov 08 '17 at 11:20
Table contains next data page. And one of the **strange** use case lazy loading - load pages one by one. And for that use case I want to be sure that I can't jump over page when user using `scrollbar` or `wheel-click` scrolling. By that reason I need to block scrolling due current page has not loaded yet. — RQman, Nov 08 '17 at 11:53
@imanshu15 actually your response (**Disable Scrolling**) the same as **almost working solution**, and that solution has the same problem, it isn't work with `scrollbar` scrolling. If you call `disableScroll()` scrolling still will be work with scrollbar or whell-click — RQman, Nov 08 '17 at 12:07

score 0 · Answer 1 · answered Nov 09 '17 at 05:05

0

Okay i see. Then to disable the scrollbar you should try ,

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

Then to cancel mousewheel scrolling you should try,

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

  evt.preventDefault(); 
  return false; 

}, false);

answered Nov 09 '17 at 05:05

imanshu15

597
3
20

It not completely what I want. Please see update of the question. I tried create more intuitive example. I don't want to hide scrollbar, I want to stop scrolling if it's possible – RQman Nov 09 '17 at 08:19

score 0 · Accepted Answer · answered Nov 09 '17 at 09:08

0

Add a class

.stop-scrolling{
overflow : hidden;
}

when you need to stop scroll over page

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

and when you want to enable it again:

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

OR do the same thing like below without adding any class:

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

answered Nov 09 '17 at 09:08

Chaitanya Chauhan

583
8
26

I marked that answer as accepted because if add class and after that remove class that should solve my problem. Current scrolling process stopped and user see no changes at interface (scrollbar doesn't disappear) – RQman Nov 14 '17 at 06:34

Is it possible programatically block scrolling

2 Answers2