The window fails to retain the scroll position when overflow is enabled

Question

The window fails to retain the scroll position when overflow is enabled

Whenever I click on a specific div, I use jQuery to dynamically apply overflow: hidden to the html and body.

$(".mydiv").on("click", function() {
   $("html, body").css("overflow", "hidden");
});

However, this action causes the window to scroll to the top of the page and lose its current scroll position. To regain the scroll position, I simply remove the overflow property like this:

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

This issue occurs when the user clicks outside the previously opened div. Any suggestions on how to prevent this?

javascript jquery html css

Answer 1

Answer №1

My assumption is that you are utilizing an <a href="#"> to toggle your CSS properties.

If not prevented with JavaScript, this will result in the page jumping to the top.

For example:

$('.overflow-toggle').on('click', function(e) {
  e.preventDefault() // prevent '#' navigation
  $("body").toggleClass('overflow-hidden');
});

.overflow-hidden {
  overflow: hidden;
}
.overflow-toggle {
  position: fixed;
  top: 0;
  right: 0;
  background: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="overflow-toggle">Toggle overflow</a>
<p>
  [Lorem Ipsum text here]
</p>
[Repeated Lorem Ipsum paragraphs]

The same example without preventing scroll:

$('.overflow-toggle').on('click', function(e) {
  $("body").toggleClass('overflow-hidden');
});

.overflow-hidden {
  overflow: hidden;
}
.overflow-toggle {
  position: fixed;
  top: 0;
  right: 0;
  background: #FFF;
}

[Same script as above without 'e.preventDefault()' included]

Applying overflow: hidden to either html or body should suffice, no need for both.

Answer 2

My assumption is that you are utilizing an <a href="#"> to toggle your CSS properties.

If not prevented with JavaScript, this will result in the page jumping to the top.

For example:

$('.overflow-toggle').on('click', function(e) {
  e.preventDefault() // prevent '#' navigation
  $("body").toggleClass('overflow-hidden');
});

.overflow-hidden {
  overflow: hidden;
}
.overflow-toggle {
  position: fixed;
  top: 0;
  right: 0;
  background: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="overflow-toggle">Toggle overflow</a>
<p>
  [Lorem Ipsum text here]
</p>
[Repeated Lorem Ipsum paragraphs]

The same example without preventing scroll:

$('.overflow-toggle').on('click', function(e) {
  $("body").toggleClass('overflow-hidden');
});

.overflow-hidden {
  overflow: hidden;
}
.overflow-toggle {
  position: fixed;
  top: 0;
  right: 0;
  background: #FFF;
}

[Same script as above without 'e.preventDefault()' included]

Applying overflow: hidden to either html or body should suffice, no need for both.

The window fails to retain the scroll position when overflow is enabled

Answer №1

Similar questions

Why does my contact form display PHP code unexpectedly?

Tips to enhance web page loading speed when parsing JSON data from a URL

Can users arrange a lineup of choices?

Issue encountered while attempting to send an HTML file using express.js

React Native: A guide to triggering a modal or action sheet when a button tab is clicked using Wix React Native navigation

Export jqgrid information into Excel and PDF while preserving the currency format

"Learn how to easily send media files stored on your local server via WhatsApp using Twilio with Node.js and Express

Using JQuery's getJSON() method causes the URL in the request header to be duplicated

issue encountered during resource provider setup

PugJS is failing to properly interpolate numbers from the JSON file

Make IE10 HTML page use IE Quirks mode

Django Dynamic Field Error: Please choose a valid option from the available choices

Alignment issue with Ul dropdown menus and shadow

Getting the dimensions of an image using a path in JavaScript

Breaking apart a pipe-separated text and sending it through a JavaScript function

Issue encountered while transferring data for populating table content with Material-ui

Ways to adjust the width of the Dialog box in Jquery UI to 60% of the window size

Leveraging Object.assign for updating fields in Firebase documents

Tips for dynamically retrieving a CSS file for an HTML page

Having trouble with Node.js GET request functionality not functioning properly