Ensure that the content on iOS does not scroll beyond the boundaries (similar to how it works on Android

My fixed position container on iOS allows for scrolling past the content to reveal the container beneath, unlike on Android. Is it possible to make iOS behave like Android in this regard?

When viewing my content on iOS, I can scroll to see the yellow container background, but this is not the case on Android:

https://jsfiddle.net/45enwzdf/1/

<div id = "container">
    <div id="contents">
    start
    </div>
</div>

#container{
  position:fixed;
  height:100px;
  width:200px;
  background:yellow;
  overflow: hidden;
  overflow-y: scroll;
  border:1px black solid;
}

#contents{
  height:1000px;
  width:200px;
  background:green;
}

Answer №1

Consider including the following CSS property: overscroll-behavior: none;

#wrapper{
  position:fixed;
  height:100px;
  width:200px;
  background:yellow;
  overflow: hidden;
  overflow-y: scroll;
  border:1px black solid;
  overscroll-behavior: none;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to create a personalized right-click context menu that displays dual links to a specific page on my website?

I want to create a custom right-click menu for users with two choices: Contact (link: Contact Us) Support (link: Support Page) <html> <head> <script type="text/javascript> if (document.addEventListener) { // IE >= 9;other br ...

Splitting HTML content into nodes using PHP XPath (including empty nodes)

I am currently attempting to separate the HTML string into individual nodes, along with their text content if applicable. Here is the HTML string that I am working with: <p>Paragraph one.</p> <p><strong>Paragraph <em>two</ ...

What is the process for renaming a key in JSON using Swift?

I have come across an issue in my application where I used the same keyname to retrieve data in multiple places. The JSON response contains the same data, but in one instance the keyname is different. I am looking for a way to rename the keyname of the arr ...

Differentiating the background color of the active tab in Bootstrap while keeping other active classes unaffected

I am currently working with Bootstrap and have created a list as shown below: https://i.sstatic.net/PqBip.png The active state of this list item is blue, but I would like to change it to green or another color. Here is the code snippet: <a class="l ...

Responsively center text vertically

I am facing a challenge with two divs that are floating next to each other: one contains a large headline text, and the other has a photo with a caption. My objective is to ensure that the headline text is vertically centered regardless of the height of th ...

Javascript does not have the capability to interact directly with HTML code

I am facing an issue with my JSP code that is supposed to validate password and confirm password before submitting the form to a Java servlet. The problem is, even though I have written the validation script, it does not show alert messages or focus on t ...

Modify individual list item attributes

I have been attempting to modify the background of the list item labeled as home in order to ensure that it displays hover properties even when not being interacted with. Despite specifying this in the class, the appearance does not change. Below is the H ...

Ways to create a clickable red button

I'm working with bootstrap, CSS, and particle.js for this project. I have also linked a custom CSS file here. However, when I apply bootstrap and particle.js, the red color generate password button becomes unclickable. After checking in Chrome dev too ...

What is the best way to insert an image in front of text within a table cell that can be identified by its class name?

JavaScript Question: function addFlags(){ while(i < $('.tabledata').length){ var current_val = $('.tabledata').eq(i).text(); arr.push(current_val); $('.tabledata').eq(i).html("<img s ...

Tips on restricting clipboard events to only trigger when they serve no other purpose?

I'm currently working on a react app and looking to implement clipboard functionality. The app consists of various div elements that users can select and rearrange, with occasional text areas and input fields for data entry or copying selected text. I ...

What is the best way to navigate to the href link?

After attempting to use driver.find_element_by_id // link_text // partial link text without success, I'm wondering what method I should be using to access this href. Currently encountering a No Such Element Exception. Any assistance would be greatly a ...

Display the AJAX reply within a designated div based on the selected value

I currently have two dropdown menus where the options in the second menu depend on what is selected in the first one. The behavior I want is for the second menu to update as soon as the user makes a selection in the first one, without needing to submit the ...

Is it possible to create a form inside a tooltip?

Looking to incorporate a jQuery feature into a form where a simple yes or no question appears upon hovering over it. However, encountering issues getting jQuery to recognize the dynamically created tooltip and submit alert function not working ("$('#w ...

Navigating absolute URLs in a localhost environment can be managed effectively by following

Ensuring that paths to pages and images are consistently accurate regardless of file hierarchy is important for my PHP website. However, I find it challenging to determine the most efficient and sustainable approach to achieving this. Currently, I am usin ...

Creating Overlapping Sections Using Bulma CSS

I'm currently diving into the world of Bulma and aiming to create a simple page layout with the following structure: <header> <hero> <section> <footer> However, I'm encountering an issue where these elements are overlapp ...

What causes the width of bootstrap column content to not expand?

It seems like I'm overlooking something really basic here. The reason for my current predicament may be more complex, but let's simplify things. Take a look at this straightforward template using bootstrap classes: <div class="wrapper&quo ...

Change the maximum width of the parent element when it is positioned relatively

In my web design project, I have a full-container with a maximum width of 1080px and positioned relatively to hold all content. Within this container, there is another div element (.portfolio) that I want to extend to the full width of the page (max-width: ...

Web Security Vulnerability: Cross Site Scripting Detected

In our code, we are aiming to prevent XSS (Cross Site Scripting) attacks. However, the solution may involve a combination of JS (JavaScript) and HTML escaping, which could prove to be quite challenging. Below is a snippet that closely resembles our code: ...

Choosing the right framework for implementing push notifications can be a critical decision. Should

I am currently working on a Java application that requires the server to send push notifications to the client every one second. To achieve this, I am using HTML5 server-sent events for one-way communication from the server to the client. However, my conce ...

Load the data from amp-list after triggering an event

I am currently exploring ways to load data on my second amp-list only after the first one has a selected value. Additionally, I am struggling to display a placeholder for the second amp-list. <div class="row"> <div class="col-sm-4 position-in ...