Welcome to this simple HTML page
<body style="overflow-y: hidden">
...
</body>
This page is designed to prevent scrolling by using the CSS property overflow-y: hidden.
While this functionality works as intended on most browsers, it does not work on Safari.
Check out a live demo here:
The main question is: how can we ensure that Safari behaves consistently with other browsers in this case?
To achieve the desired effect, simply add the CSS property overflow: hidden.
Another option is to experiment with setting position: fixed on the <body> element.
(Please note that when using this method, the body will automatically scroll to the top because of the default top: 0 setting.)
In cases where safari mobile devices are involved, it may be necessary to utilize Javascript events for proper functionality. This can be further understood by referring to the following answer:
Using position fixed allows you to create a div that remains in the same spot on the screen even when the content underneath it is scrolled.
When an element has a fixed position, it is taken out of the normal document flow and does not affect the layout of the page. It is positioned relative to the viewport unless there are ancestor elements with transform, perspective, or filter properties set. In that case, the ancestor becomes the reference point for positioning (with some inconsistencies across browsers). The final position is determined by top, right, bottom, and left values.
This value always establishes a new stacking context and, in printed documents, will maintain its position across pages.
Have you considered using absolute positioning instead?
body {
overflow-y: hidden;
}
#backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .2);
border: 5px dashed black;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="backdrop">
</div>
<div>0%</div>
<div>1%</div>
<div>2%</div>
<div>3%</div>
<div>4%</div>
<div>5%</div>
<div>6%</div>
<div>7%</div>
<div>8%</div>
<div>9%</div>
<div>10%</div>
<!-- Additional code snippets here -->
</body>
</html>You can attempt the following solution:
<html>
<head>
<style>
.forSafari::-webkit-scrollbar { width: 0 !important }
</style>
</head>
<body style="overflow-y: hidden" class="forSafari">
// Your content here
</body>
</html>
To solve the issue, simply apply either "position: relative" or "position: fixed"
Seeking advice on creating a basic index page with a Google-style centered search bar using Twitter Bootstrap. Struggling to achieve desired aesthetics. Need help adding a search icon button to the right side of the search field. Utilized typeahead for fu ...
After reviewing my current code, it is displaying the following: https://i.stack.imgur.com/dvjrc.jpg I am attempting to make the following changes: Ensuring each line in the list fits properly within its corresponding box by utilizing vertical-align: to ...
After creating a code snippet for image tooltips on text hover, I encountered an issue on my website where the bottom of the page expanded to accommodate the images. Is there a simple way to align the cursor at the bottom of the image when scrolling to the ...
I implemented an SVG triangle using HTML: path { fill: red; filter: drop-shadow(5px 3px 17px rgb(0 0 0 / 1)); } <svg style="height: 36px; width: 100%; background-color: #EAEAEA ;" viewBox="0 0 436 217" preserveAspectRatio="none" class="Tagline ...
Let's take a look at this snippet for creating a Material Dialog in code: <Dialog open={this.props.open} onClose={this.props.closeAtParent} PaperProps={{ style: { minHeight: '75vh', minWidth: '75vw', ...
In order to achieve the desired outcome, each Section should initially appear in a collapsed state. Panel 0 and 2 start off collapsed, however, panel 1 does not but can be collapsed upon clicking. Additionally, Panel 1 incorporates an iframe that displays ...
Currently, I am attempting to customize the MUI tab by changing the indicator from a line to a background color. Through my research, I discovered that using TabIndicatorProps and setting a style of display:none eliminates the indicator completely. However ...
Need help fixing the parallax effect on this page. I attempted to implement a parallax effect but encountered some issues. Here is the JavaScript code: $objWindow = $(window); $('section[data-type="background"]').each(function(){ var $bgOb ...
My goal is to design a responsive gallery that displays images of various dimensions. I envision having 5 square divs of equal size on a full screen, with each image centered both horizontally and vertically, scaled to fit with some padding that adjusts pr ...
I have been in the process of creating a Chrome Extension, and unfortunately, when I tried to make it work on specific URLs, I encountered an issue. While Chrome has options like exclude_matches and exclude_globs for this purpose, there seems to be a bug i ...
I need assistance placing buttons in specific positions above an image carousel using HTML and CSS code. Despite researching various resources, I am unable to resolve this issue. This is the HTML implementation: <!-- Image where buttons should be placed ...
I used JavaScript to make an input range vertical, like so: var range_pitch = document.createElement("input"); range_pitch.setAttribute("type", "range"); range_pitch.style.webkitTransform = "rotate(90deg)"; range_pitch.style.mozTransform = "rotate(90deg)" ...
Currently, I'm tasked with developing an educational website using HTML and CSS for a school project. Unfortunately, due to restrictions on code.org, I cannot utilize JavaScript files or script tags. Despite successfully implementing a parallax effect ...
Take a look at the image for the issue: https://i.stack.imgur.com/u9aCy.png As shown in the image, the NavBar links are stacked instead of being displayed in one row. This is the HTML code I have used: <!doctype html> <html> <head> ...
Whenever I use ckeditor, I find that pressing enter results in two <br /> tags being inserted. While I want to keep the line break tags, having them appear twice is not ideal. In my config.js file, I have set the configuration for the enter key as f ...
I am on the hunt. I am looking for a CSS-Selector, but if that's not an option, a jQuery selector would work too. ...
I am relatively new to React Native, although I have experience with React in my professional work. I'm finding that applying styles to components in React Native is a bit different than what I'm used to. Specifically, I am struggling to apply s ...
I'm currently tackling a challenge with my NextJS Website project. It's the first time this issue has arisen for me. Typically, I set the body width to 100% or 100vw and everything works smoothly. However, upon switching to a mobile device, I not ...
I am attempting to create a sidebar with a fixed position, featuring a small header and a scrollable content area below it. The issue I am facing is that I am unable to scroll through the entire content within the div, resulting in some parts being cut of ...
I have a question regarding the Angular Material Sidenav component. I noticed that in the code below, when I increase the border-radius property to a certain value, the element seems to disappear. <mat-drawer-container class="example-container" ...