Is there a way to remove that small vertical scroll on the mobile view of webpages without using overflow?
I know the normal way is to just add: overflow-x: hidden; but, I also have an element with sticky positioning position: sticky; which doesn't work anymore when overflow is applied to the parent elements. So is there a way i can get the same effect but without using overflow?
html,body{
overflow-x: hidden; /* ADDIND THIS SOLVES THE VERTICAL SCROLL ISSUE BUT BREAKS THE STICKY DIV BELOW */
}
div.header-fixed {
position: -webkit-sticky; /* Apple */
position: sticky;
width: 100%;
background-color: #202020;
padding: 5px;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="read comments in css">
<title>scroll</title>
</head>
<body>
<div class="header-fixed" id="fixed-header">
</div>
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</body>
You can hide the vertical scrollbar with the ::-webkit-scrollbar pseudo-element, but it not works in firefox browser:
body{
overflow-y: scroll;
scrollbar-width: none; /* Firefox ? */
-ms-overflow-style: none; /* IE, Edge */
}
body::-webkit-scrollbar {
display: none; /* Chrome, Opera, Safari */
}
div.header-fixed {
position: -webkit-sticky;
/* Apple */
position: sticky;
width: 100%;
background-color: #202020;
padding: 5px;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CSCB20 Course Website">
<title>scroll</title>
</head>
<body>
<div class="header-fixed" id="fixed-header">
</div>
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</body>
An other option is to use containers, the child container's width is more than the parent container's, so the scrollbar will be hidden:
.parent {
position: relative;
width: 100%;
height: 75vh;
overflow: hidden;
}
.child {
width: 105%;
height: 100%;
overflow-y: scroll;
}
div.header-fixed {
position: -webkit-sticky;
/* Apple */
position: sticky;
background-color: #202020;
padding: 5px;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CSCB20 Course Website">
<title>scroll</title>
</head>
<body>
<div class="header-fixed" id="fixed-header">
</div>
<div class="parent">
<div class="child"> <br>a<br>a<br>b<br>a<br>a<br>a<br>a<br>a<br>a<br>b<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>b<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>b<br>a<br>a<br>a<br>b<br>a<br>a<br>a<br>a<br>b<br>a<br>a<br>a<br>a<br>a
</div>
</div>
</body>
Related
This is my HTML with styles:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html {
height: 100vh;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
body {
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
}
#media (orientation:landscape){
body{
height:70vw;
width:70vw;
}
}
</style>
<body></body>
</html>
I wanted a circle that was slightly cut on both left & right sides(mobile) and up & down (for desktop) so i thought this was the best way but what I observe is that the page also ends up with extra width on mobile and extra height on desktop, I don't want this to happen.
Is there any way deal with this so the circles remain cut and removing the scrolling?
Use heigth: 100% and width: 100% and overflow: hidden on your html tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html {
height: 100%;
width: 100%;
overflow: hidden;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
body {
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
}
#media (orientation:landscape){
body{
height:70vw;
width:70vw;
}
}
</style>
<body></body>
</html>
/* body{
overflow-x: hidden;
} */
.divOne{
/* overflow-y: hidden; */
position: relative;
background-color: aqua;
height: 100px;
width: 100%;
}
.divTwo{
background-color: red;
height: 300px;
width: 300px;
position: absolute;
top: -30px;
right: -80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>learning about canvas</title>
</head>
<body>
<div class="container-div">
<div class="divOne">div1</div>
<div class="divTwo">div2</div>
</div>
</body>
</html>
I want to make it so that the horizontal scroll bar wouldn't appear below. I want to make the overflowing 2 div overflow: hidden . but overflow : hidden only works when its applied to body and that causes a lot of problems.
You need to add absolute positioning rules for the container-div class, relative positioning for the body tag, with the overflow-x: hidden rule.
Now your block .divTwo is hidden in the viewing area, I have a width of 300x300.
body {
position: relative;
overflow-x: hidden;
}
.container-div {
position: absolute;
left: 0;
right: 0;
}
.divOne{
/* overflow-y: hidden; */
background-color: aqua;
height: 100px;
width: 100%;
}
.divTwo{
background-color: red;
height: 300px;
width: 300px;
position: absolute;
top: -30px;
right: -80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>learning about canvas</title>
</head>
<body>
<div class="container-div">
<div class="divOne">div1</div>
<div class="divTwo">div2</div>
</div>
</body>
</html>
I am new to HTML.
My question is, how do I show different iframes, based on the sizes of media queries?
Example:
for #media (max-width:400px) load iframe01 and for the rest of the sizes, load iframe02.
Any ideas, please?
My code is as follows:
.container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 75%; /* 4:3 Aspect Ratio */
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<iframe class="responsive-iframe" src="iframe_sample"></iframe>
</div>
</body>
</html>
It is possible to achieve this.
Here is an example:
html {
background: blue;
}
.container {
position: relative;
width: 100%;
overflow: hidden;
/* padding-top: 75%; */
/* 4: 3 Aspect Ratio; */
}
.responsive-iframe,
.responsive-iframe2 {
/* position: absolute; */
top: 0;
left: 0;
/* bottom: 0; */
right: 0;
width: 100%;
height: 100%;
border: none;
}
#media only screen and (max-width: 400px) {
html {
background: red;
}
.responsive-iframe {
/* position: absolute; */
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
.responsive-iframe2 {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<iframe class="responsive-iframe" src="https://www.facebook.com/"></iframe>
<iframe class="responsive-iframe2" src="https://twitter.com/home"></iframe>
</div>
</body>
</html>
The iframes are broken links. However, you can give a separate ID or class to each iframe and then use the display: none property on the ID or class that you do not want visible.
The code I presented shows two iframes on desktop format. However, once you scale the page to 400px or less, it shows only one. I also altered the background colour for reference.
Hope this answers your question.
I have an IFrame on a webpage when I use IOS Safari I have a bug where it doesn't let me scroll down. I've done a lot of research around this and see its a common bug, but I can't seem to get my version working. The most descriptive solution is
How to get an IFrame to be responsive in iOS Safari?.
Although I can't get that method working for me. Heres what I have so far:
index.html
html,
body {
padding: 0;
margin: 0;
border: 0;
}
iframe {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
border: 0;
z-index: 9999;
/* overflow: auto; */
}
#scroll-wrapper {
-webkit-overflow-scrolling: touch!important;
overflow-y: scroll;
width: 100%;
height: 150vh;
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<body>
<!-- <div id="scroll-wrapper"> -->
<iframe src="iframe.html" allowtransparency="true"></iframe>
<!-- </div> -->
</body>
</html>
iframe.html
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 1px;
min-width: 100%;
*width: 100%;
}
div {
display: block;
margin: 0 auto;
max-width: 300px;
width: 100%;
height: 1000px;
border: 3px solid grey;
text-align: center;
line-height: 150px;
margin-bottom: 50px;
margin-top: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<body>
<div>Context1</div>
</body>
</html>
Uncomment <div id="scroll-wrapper"> and add this style for iframe wrapper:
#scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
See David's post about this trick
2022 and still a problem on ios. the solution i found is a hack, and it suits me much better than the wrapper around the iframe. for this hack to work we need an element in the iframe and and onload function attached to the iframe in the parent window:
in the iframe, put it anywhere you'll like:
<span id="eIphoneHack"></span>
in the parent, add an onload event to the iframe:
$("#eInnerWnd").on("load",function(e){
$("#eIphoneHack",document.getElementById("eInnerWnd").contentWindow.document).css("display","none").css("display","initial");
}
and hopefully it will work for you as it did for me.
I'm trying to create a 3 column webpage with sticky side bars + sticky header and footer, however I'm having issues as the sidebars goes above my header. What I want to accomplish is the sidebars floating under the header, and the only element moving when scrolling is the middle section.
div.sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
.wrapper {
display: flex;
justify-content: space-between;
}
.main, .side-left, .side-right {
border: 3px solid black;
padding: 15px;
background-color: #fff;
}
.main {
width: 90%;
height: 150vh;
}
.side-left, .side-right {
width: 10%;
height: 25vh;
position: sticky;
position: -webkit-sticky;
top: 0;
margin: 0;
}
body {
background-color: #ccc;
font-family: sans-serif;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<title></title>
</head>
<body>
<div class="sticky-header">I will stick to the screen when you reach my scroll position</div>
<div class="wrapper">
<div class="side-left">
left
</div>
<div class="main">
middle stuff
</div>
<div class="side-right">
right
</div>
</div>
</body>
</html>
Fiddle:
https://jsfiddle.net/jbnak12c/
Thanks in advance!
Probably you already found the answer but for those who might also be having a look at this question z-index: 10; in div.sticky-header would do the trick.