How to stop myself from scrolling under the fold in vanilla JavaScript?

JavaScript
1

I try to develop a personal script which would prevent me from scrolling down in websites directly when I open them.

A kind of “digital wellbeing” supplement that let’s one to take a moment and read the ABOVE_THE_FOLD content without (vertical) scrolling bias/diversion.

How to stop myself from scrolling under the fold in vanilla JavaScript?

2

This is the farthest I have managed to go:

const myInterval = setInterval( () => {
    window.scrollTo({
        top: 100,
        left: 100,
        behavior: "instant",
    });
}, 0.);

window.setTimeout( () => {
  clearInterval(myInterval);
}, 5000);
3

Could you not just disable scrolling altogether for five seconds or whatever, then re-enable it?

function disableScroll() {
  document.body.style.position = 'fixed';
}

function enableScroll() {
  document.body.style.position = '';
}

disableScroll();
setTimeout(enableScroll, 5000);

Full demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Disable Scrolling</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
    }

    .content {
      height: 2000px;
    }
  </style>
</head>
<body>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <script>
    function disableScroll() {
      document.body.style.position = 'fixed';
    }

    function enableScroll() {
      document.body.style.position = '';
    }

    disableScroll();
    setTimeout(enableScroll, 5000);
  </script>
</body>
</html>

Be aware that this will replace the position property on the body element if the page had for whatever reason set this property.

Does that do what you want?

6

When I used only the JavaScript (because it is a user script) on this very webpage, it changed the webpage’s appearance drastically.

7

Which web page?

Sorry, just re-read your post. Lemme have a look…

8

If you can use css you could just do this.

body{
animation:noscroll  10s forwards;
}
@keyframes noscroll {
0%{overflow:hidden;height:100vh;}
99%{overflow:hidden;height:100vh;}
100%{overflow:visible;height:auto;}
}
3 Likes
9

I tried adding my code as a userscript to this page and to be fair it does stop the scrolling.

If you want to keep the layout you can do:

(function() {
  'use strict';
  function disableScroll() {
    document.getElementById('main-outlet').style.position = 'fixed';
  }

  function enableScroll() {
    document.getElementById('main-outlet').style.position = '';
  }

  disableScroll();
  setTimeout(enableScroll, 5000);
})();

But that is a brittle method.

Paul’s solution is much better and does exactly what you need. I just tried it out using Stylus and it works like a charm.

2 Likes
10

Indeed, it worked on this webpage when I have injected that code to the head tag:

newStyle = document.createElement("style");
newStyle.type = "text/css";
newStyle.innerHTML +=`
  body {
    animation:noscroll  10s forwards;
  }
  @keyframes noscroll {
    0%{overflow:hidden;height:100vh;}
    99%{overflow:hidden;height:100vh;}
    100%{overflow:visible;height:auto;}
  }
`;
document.head.appendChild(newStyle);
11

Just be aware that when visitors come to your page and it doesn’t respond to interactions for at least 10 seconds, they are likely to just give up on you and go to some other page.

1 Like
12

I believe the OP was doing it for themselves only via an extension or similar. :slight_smile: