Expand the element's functionality to encompass the overscroll area on OS X

Question

Expand the element's functionality to encompass the overscroll area on OS X

I have a webpage with a fixed background and a floating footer at the bottom. When users on OS X overscroll, they can see the background below the footer. Rather than disabling overscrolling for my page, I want to extend the bottom div to cover the background without increasing the page height.

How can I achieve this without changing the page height? Adjusting the div size just expands the scrollable area. I came across a question that suggests hiding the element, but that would not cover the background.

Is there a way to hide elements in the overscroll region below the page?

Here is a GIF showcasing the issue:

The background displays below the white region when users "overscroll". I do not want to prevent overscrolling, but I want to hide the background using a white div at the bottom of the page.

javascript html css macos overscroll

Answer 1

Answer №1

My initial suggestion, without actually seeing the code, would be to follow your idea of increasing the height of the bottom div to compensate for the excessive scrolling. You can achieve this by adjusting the CSS like this:

.bottom-container {
  position: relative;
  height: /* current height + overflow amount of height */
  top: /* overflow amount of height */
}

For example, if your bottom container is currently set at 400px:

.bottom-container {
  position: relative;
  height: 600px;
  top: 200px;
}

This approach should theoretically solve the issue, assuming there are no restrictions from overflow: hidden in the styling.

body {
  margin: 0;
  padding: 0;
}
.fixed-background {
  position: fixed;
  height: 100vh;
  width: 100%;
  background: tomato;  
}
.fixed-placeholder {
  height: 100vh;
  background: transparent;
}
.bottom-container {
  position: relative;
  height: 400px;
  width: 100%;
  background: white;
  top: 200px;
}

<div class="fixed-background">
  <h1>Fixed Background</h1>
</div>
<div class="fixed-placeholder"></div>
<div class="bottom-container">
  <h2>More content down here</h2>
</div>

Answer 2

My initial suggestion, without actually seeing the code, would be to follow your idea of increasing the height of the bottom div to compensate for the excessive scrolling. You can achieve this by adjusting the CSS like this:

.bottom-container {
  position: relative;
  height: /* current height + overflow amount of height */
  top: /* overflow amount of height */
}

For example, if your bottom container is currently set at 400px:

.bottom-container {
  position: relative;
  height: 600px;
  top: 200px;
}

This approach should theoretically solve the issue, assuming there are no restrictions from overflow: hidden in the styling.

body {
  margin: 0;
  padding: 0;
}
.fixed-background {
  position: fixed;
  height: 100vh;
  width: 100%;
  background: tomato;  
}
.fixed-placeholder {
  height: 100vh;
  background: transparent;
}
.bottom-container {
  position: relative;
  height: 400px;
  width: 100%;
  background: white;
  top: 200px;
}

<div class="fixed-background">
  <h1>Fixed Background</h1>
</div>
<div class="fixed-placeholder"></div>
<div class="bottom-container">
  <h2>More content down here</h2>
</div>

Expand the element's functionality to encompass the overscroll area on OS X

Answer №1

Similar questions

Is the absence of http(s) in <link ...> causing any issues?

Error: Jquery append and Push are not recognized as functions

What is the process for incorporating a glossiness / specular texture onto a GLTF model?

Is there a proper way to supply createContext with a default value object that includes functions?

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?

Improving the layout and size of text within input fields

Error: Query is not valid

Error message: `$.each` is not a valid function in ReactJS

What is the best way to calculate the total of a field with matching Project and Employee names?

Tips for altering the color of two circles when they overlap:

Sorting data on-the-fly using an HTML Select drop-down menu

How to customize the button color in a Next.js application

Mastering the art of horizontal alignment in forms

Is there a way to directly save a JSON object into the DOM?

Instructions on utilizing the signUp() function in Supabase for including extra user details during the registration process

Retrieving information through a loop in Next.js

What could be causing the favicon in my Next.js application to not function properly?

Using jQuery to set menu active states for a sprite-based navigation with distinct class names

Is it possible to pass an HTML element's id attribute to a function in JavaScript?

Do I require two bot logins for discord.js?