title: How do I allow only scrolling upwards and disable scrolling downwards?
body: <p>I have an event listener and you can scroll on my webpage until <code>window.scrollY</code> is larger than 50. If you reach the 50 with window.scrollY, then you are only allowed to scroll upwards. If you are e.g. at 47 then you can scroll downwards to 50 again. I currently implemented it with <code>window.scroll(0, 50);</code> to prevent scrolling below 50, but if you try to scroll below 50 the webpage is jumpy/glitchy. Do you have any suggestions?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>onScroll() {
    this.scrollPosition = window.scrollY;
    this.newValue = window.pageYOffset;
    if (window.scrollY &gt; 50) {
      if (this.oldValue &lt; this.newValue) {
        // Do not scroll below 50
        window.scroll(0, 50);
      }
    }
    this.oldValue = this.newValue;
  }</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/u0WZ8.png" rel="nofollow noreferrer">Overview image</a>
  As you can see in the image, there is an overlay menu. The menu appears on top of the contents after pressing an icon.</p>