Chrome does not allow accessing or setting the `scrollTop()` property for elements with `position: absolute`

Question

Chrome does not allow accessing or setting the `scrollTop()` property for elements with `position: absolute`

When using the JS Fiddle provided, it was discovered that clicking the link in the sidebar scrolls the page to 400px down in Firefox, but this functionality does not work in Chrome.

Check out the JS Fiddle here

If I am unable to modify the HTML or CSS, is there a JavaScript solution to resolve this issue?

body {
  position: absolute;
  left: 0;
  right: 20%;
  top: 0;
  bottom: 0;
  overflow: hidden;
  overflow-y: scroll;
}
html {
  overflow: hidden;
  height: 100%;
}

In Chrome, the following code snippet always returns 0 regardless of scrolling distance:

console.log($('body').scrollTop());

Additionally, the following code has no effect in Chrome:

$('body').scrollTop(400);

These methods work as expected in Firefox.

javascript jquery html css

Answer 1

Answer №1

The reason for this issue is the presence of overflow: hidden; in your CSS applied to the html selector. Once you eliminate that, everything should function as intended. Check out the revised demo here: https://example.com/demo

Answer 2

The reason for this issue is the presence of overflow: hidden; in your CSS applied to the html selector. Once you eliminate that, everything should function as intended. Check out the revised demo here: https://example.com/demo

Answer 3

Answer №2

To resolve the issue, try removing the 'position: absolute' from the body attributes before attempting $("html,body").animate({ scrollTop: 400 }, "slow");

I apologize for overlooking the title... my previous solution is not compatible with elements using absolute positioning.

Answer 4

To resolve the issue, try removing the 'position: absolute' from the body attributes before attempting $("html,body").animate({ scrollTop: 400 }, "slow");

I apologize for overlooking the title... my previous solution is not compatible with elements using absolute positioning.

Answer 5

Answer №3

Take a look at this interactive example on JSFiddle: https://jsfiddle.net/a4qx507f/12/

To manage overflowed content, enclose it within a 'content' div.

<div id="content">
  <button class="btn">Get scroll Top</button>
  <p>
    Lorem ipsum dolor sit amet, 
   .....
  </p>
</div>

Add the following CSS to the #content selector:

#content{
  overflow-y: auto;
  max-height: 100%;
}

Additionally, remove overflow-y: scroll from the body.

body {
  position: absolute;
  left: 0;
  right: 20%;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background: #c0ffee;
  padding: 0;
  margin: 0;
}

SNIPPET

$('.btn').on('click', function() {
  console.log($('body').scrollTop());
  console.log($('#top-pos').position().top);
})

$('#scroll').on('click', function(e) {
  e.preventDefault();

  $('#content').scrollTop(400);


})

body {
  position: absolute;
  left: 0;
  right: 20%;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background: #c0ffee;
  padding: 0;
  margin: 0;
}

html {
  overflow: hidden;
  height: 100%;
}

.sidebar {
  width: 20%;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  background: #333;
  color: #fff;
  padding: 1em;
  box-sizing: border-box;
}

.sidebar a {
  color: #fff;
}

#top-pos {
  top: 0;
  position: absolute;
  height: 0;
}

#content{
  overflow-y: auto;
  max-height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
  <h4>Sidebar</h4>
... [Truncated for brevity] ...         turpis egestas.
  </p>
  ...
  <button class="btn">Get scroll Top</button>
</div>

Answer 6

Take a look at this interactive example on JSFiddle: https://jsfiddle.net/a4qx507f/12/

To manage overflowed content, enclose it within a 'content' div.

<div id="content">
  <button class="btn">Get scroll Top</button>
  <p>
    Lorem ipsum dolor sit amet, 
   .....
  </p>
</div>

Add the following CSS to the #content selector:

#content{
  overflow-y: auto;
  max-height: 100%;
}

Additionally, remove overflow-y: scroll from the body.

body {
  position: absolute;
  left: 0;
  right: 20%;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background: #c0ffee;
  padding: 0;
  margin: 0;
}

SNIPPET

$('.btn').on('click', function() {
  console.log($('body').scrollTop());
  console.log($('#top-pos').position().top);
})

$('#scroll').on('click', function(e) {
  e.preventDefault();

  $('#content').scrollTop(400);


})

body {
  position: absolute;
  left: 0;
  right: 20%;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background: #c0ffee;
  padding: 0;
  margin: 0;
}

html {
  overflow: hidden;
  height: 100%;
}

.sidebar {
  width: 20%;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  background: #333;
  color: #fff;
  padding: 1em;
  box-sizing: border-box;
}

.sidebar a {
  color: #fff;
}

#top-pos {
  top: 0;
  position: absolute;
  height: 0;
}

#content{
  overflow-y: auto;
  max-height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
  <h4>Sidebar</h4>
... [Truncated for brevity] ...         turpis egestas.
  </p>
  ...
  <button class="btn">Get scroll Top</button>
</div>

Chrome does not allow accessing or setting the `scrollTop()` property for elements with `position: absolute`

Answer №1

Answer №2

Answer №3

Similar questions

When the parent element has a fixed position, the child element will no longer maintain its floating property

Navigating the FormSpree redirect: Tips and tricks

choose the initial element within a class

How can I customize the appearance of a disabled radio button within spans?

What steps can I take to streamline and simplify this tab controller code?

Invoke a JavaScript file within the MongoDB shell

Creating a Dynamic Input Validation Range with JQuery

Modify the Ng-Pattern with Jquery

Execute PHP and HTML code stored in a string

I'm struggling to successfully insert and retrieve data from a MySQL database using Express.js. I need to figure out how to make these operations work seamlessly across the board

Create an AngularJS task manager that saves your to-do list even when the page is refreshed

Error: Please provide the required client_id when setting up Google Sign-In with Next-Auth

Guide to Establishing a Connection to WCF Service using Ionic Project and AngularJS

Can integer values be stored in localStorage similar to JavaScript objects and retrieved without requiring typecasting?

Test a JavaScript function within an Angular service using the Jasmine framework

Text overlaps when li element is nested inside another element

Exploring the implementation of query parameters in Nest.js

What is the best way to add a line break to a menu item?

Can a function be returned using AJAX?

Utilizing Dojo widgets in Xpages