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

Content in the Bootstrap carousel vanishes without warning after a period of time

Fade-in a new, revised text after fading-out the original text in ReactJS

Mysterious error arises in Internet Explorer versions 7 and 8: An expected colon is missing

What are the implications of dynamically setting or changing event handlers in web development?

A more intelligent approach for generating JSON responses using Mysql

Manipulating JSON data in JavaScript

JavaScript loop to target a specific item

Forecasting text input demands

Tips for preventing harmful messages in a chat room app

Switching my Selenium code to HtmlUnit: A Step-by-Step Guide

Tips for customizing a button's font with CSS

Tips for selecting an element within a span by clicking on it?

How can a callback be properly passed in programming?

Using Javascript, incorporate a string variable into the response

The qTip comment box vanishes when focused on by IE/Edge browsers using touch devices

How to use getBoundingClientRect in React Odometer with React Visibility Sensor?

Make sure to tick the checkbox by clicking on the <tr> element using jQuery

Press the LI element to toggle the visibility of the UL element

Enhancing a Dropdown List with Jquery Using JSON Data

Guide on utilizing exported API endpoint in Node and Express