first of all, I have read all the related topics created and none has worked for me.
I have this iframe 100% of the width and height of the screen
<iframe src="https://site.test" frameborder="0" id="iframe" style="display: block; overflow: hidden; border: none; height: 100vh; width: 100vw;"></iframe>
I tried this and it doesn't work for me
iframe { overflow:hidden; }
But it does not work. Be careful, I need to hide them, not disable them, so
scrolling ="no"
It does not serve me.
you can edit your code. remove display:block in inline css.
#iframe{
scrollbar-width: none;
-ms-overflow-style: none;
}
If you have access to the iframe then use these line of codes inside the iframe page CSS:
/* Works for Chrome */
::-webkit-scrollbar{width:0}
And
/* For Firefox and Microsoft Edge or IE */
html{scrollbar-width:none;-ms-overflow-style:none;}
how to?
a {
position: fixed;
overflow-y: hidden;
top: 0;
left: 0;
}
Related
I want to use an iframe on a website and use this code:
<iframe src="https://dispatchcenter.com/widgets/tall/" width="100%" height="auto" marginheight="0" frameborder="0" border="0" scrolling="no"></iframe>
But the scrolling bar still shows. If I made anything wrong?
Can anyone help me to remove the scroll bar?
First give class to i frame and try this in css,
For Chrome, Safari and Opera:
.example::-webkit-scrollbar {
display: none;
}
For IE and Edge:
.example {
-ms-overflow-style: none;
}
For Firefox:
.example {
scrollbar-width: none;
}
It seems you cannot.
Tested in Chrome and FX.
Chrome hides the body one, but not the iFrame one
body {
background-color: teal;
}
iframe {
height: 2000px;
}
.hidescrollbar {
-ms-overflow-style: none;
/* Internet Explorer 10+ */
scrollbar-width: none;
/* Firefox */
}
.hidescrollbar::-webkit-scrollbar {
display: none;
/* Safari, Chrome Edge */
}
<body class="hidescrollbar"><!-- does not help in firefox in the fiddle -->
<iframe class="hidescrollbar" src="javascript:'<body class=hidescrollbar><div style=height:2500px>Hello</div></body>'"></iframe>
</body>
If the page is from the same server or a server with CORS enabled, use a div instead and insert using AJAX or via the server
I'm using Chrome version 84.0.4147.89, and have a div that uses
overflow-y:scroll;
The scrolling functionality works, however no scroll bar shows. It does show in IE. I'm required to get it show as users with no mouse or touchscreen find it very difficult to scroll without the bar visible.
I have tried
overflow-y:scroll!important;
but that did not work either.
I have also tried disabling 'Use hardware acceleration when available' as I saw it recommended in another thread, but that also did not work.
How do I make the scroll bar appear for Chrome?
Thanks.
I think you have to declare a height. Here's an example of what I'm using.
div {
width: 30vw;
height: 49.75vw;
min-height: 1em;
overflow-y: visible;
overflow-x: hidden;
direction: ltr;
/*position of scroll bar can use rtl if wanted, but use div * {direction: ltr;} if you do.} */
scrollbar-width: thin;/*fancy width*/
scrollbar-color: #f3f0dd #154734;/*fancy colors for Firefox*/
}
div::-webkit-scrollbar {
width: 11px;
}
div::-webkit-scrollbar-track {
background: #154734;
}
div::-webkit-scrollbar-thumb {
background-color: #f3f0dd;
border-radius: 6px;
border: 3px solid #154734;
}
Currently working on an html5 video player. I am running into an issue where once the video element is fullscreen, my custom controls are not clickable due to the video's z-index being set to the max int value; the same as the controls z-index. the default browser media controls are already hidden.
<div id="video-container">
<video frameborder='0' id="page-video" playsinline>
<source src='{{source}}'>
</video>
<div class="container" id="player-controls">
<!-- controls go here -->
</div>
</div>
here's the css for the video container in fullscreen:
#video-container {
position: relative;
max-width: 512px;
margin: 0 auto;
}
here's the css for the video in fullscreen:
#page-video:-webkit-full-screen {
width: 100%;
height: 100%;
position: relative;
z-index: 1 !important;
}
Here is the css for the controls:
#player-controls {
position: absolute;
bottom: 0;
left: 0;
max-width: 100%;
height: auto;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
visibility: hidden;
transition: all .2s linear;
padding: 0;
width: 100%;
z-index: 2147483647;
cursor: pointer;
}
in the Chrome dev tools, the computed z-index for the video element is changed from auto when its NOT in fullscreen to 2147483647 however clicking on the arrow to expand, it shows the z-index: 1 !important style from my style sheet. This style is not crossed out or anything. I don't really understand why this is happening. These are the only two places in my entire style sheet that use z-index. There are no negative z-indexes anywhere.
The video tag will ignore the z-index you set on it and use the UA styles of "auto" and 2147483647 unless you set position: absolute or position: fixed on it. See HTML5 video ignoring z-index
To hide the native controls, you need to disable them via the "controls" attribute.
<video controls="false">...</video>
In some browsers, there seems to be a bug so that the native controls are still visible in fullscreen mode. You can override the browsers stylesheet and hide them manually:
video::-webkit-media-controls {
display:none !important;
}
To show your custom controlls, simply set the z-index to the max int value.
#player-controls {
z-index: 2147483647;
}
All of this is described in this blog: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
I've got some simple html and css (see below) that shows a flex app inside a Div tag. In most browsers (ie8, chrome, FF), the object doesn't have a border or a vertical scrollbar. In ie9, both a scrollbar and a 3D etched border are shown. I'd like to remove those, I tried various border styles but nothing seem to help. Does anyone have a solution for this? Is this a known problem for ie9 only?
I'm kind of new to Html, CSS, javascript, etc. and I have to say, IE browsers are a pain!
#mapLocation
{
position: absolute;
top: 131px;
left:0;
z-index: 0;
bottom: 120px;
width: 100%;
z-index: 2;
border-style: none;
}
#mapObject{
position:relative;
width: 100%;
height: 100%;
z-index: 2;
border-style: none;
}
</style>
<div id="mapLocation" >
<object id="mapObject" type="text/html" data="otherFile.html"></object>
</div>
Thanks for any help,
Ggilmann
I just had the same issue. It may be a compatibility mode that is switched on in your IE9 browser. Try to uncheck it.
In Chrome for Mac, one can "overscroll" a page (for lack of a better word), as shown in the screenshot below, to see "what's behind", similar to the iPad or iPhone.
I've noticed that some pages have it disabled, like gmail and the "new tab" page.
How can I disable "overscrolling"? Are there other ways in which I can control "overscrolling"?
The accepted solution was not working for me. The only way I got it working while still being able to scroll is:
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
In Chrome 63+, Firefox 59+ and Opera 50+ you can do this in CSS:
body {
overscroll-behavior-y: none;
}
This disables the rubberbanding effect on iOS shown in the screenshot of the question. It however also disables pull-to-refresh, glow effects and scroll chaining.
You can however elect to implement your own effect or functionality upon over-scrolling. If you for instance want to blur the page and add a neat animation:
<style>
body.refreshing #inbox {
filter: blur(1px);
touch-action: none; /* prevent scrolling */
}
body.refreshing .refresher {
transform: translate3d(0,150%,0) scale(1);
z-index: 1;
}
.refresher {
--refresh-width: 55px;
pointer-events: none;
width: var(--refresh-width);
height: var(--refresh-width);
border-radius: 50%;
position: absolute;
transition: all 300ms cubic-bezier(0,0,0.2,1);
will-change: transform, opacity;
...
}
</style>
<div class="refresher">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<section id="inbox"><!-- msgs --></section>
<script>
let _startY;
const inbox = document.querySelector('#inbox');
inbox.addEventListener('touchstart', e => {
_startY = e.touches[0].pageY;
}, {passive: true});
inbox.addEventListener('touchmove', e => {
const y = e.touches[0].pageY;
// Activate custom pull-to-refresh effects when at the top of the container
// and user is scrolling up.
if (document.scrollingElement.scrollTop === 0 && y > _startY &&
!document.body.classList.contains('refreshing')) {
// refresh inbox.
}
}, {passive: true});
</script>
Browser Support
As of this writing Chrome 63+, Firefox 59+ and Opera 50+ support it. Edge publically supported it while Safari is an unknown. Track progress here and current browser compatibility at MDN documentation
More information
Chrome 63 release video
Chrome 63 release post - contains links and details to everything I wrote above.
overscroll-behavior CSS spec
MDN documentation
One way you can prevent this, is using the following CSS:
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body > div {
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
This way the body has never any overflow and won't "bounce" when scrolling at the top and bottom of the page. The container will perfectly scroll its content within. This works in Safari and in Chrome.
Edit
Why the extra <div>-element as a wrapper could be useful: Florian Feldhaus' solution uses slightly less code and works fine too. However, it can have a little quirk, when it comes to content that exceeds the viewport width. In this case the scrollbar at the bottom of the window is moved out of the viewport half way and is hard to recognize/reach. This can be avoided using body { margin: 0; } if suitable. In situation where you can't add this CSS the wrapper element is useful as the scrollbar is always fully visible.
Find a screenshot below:
You can use this code to remove touchmove predefined action:
document.body.addEventListener('touchmove', function(event) {
console.log(event.source);
//if (event.source == document.body)
event.preventDefault();
}, false);
Try this way
body {
height: 100vh;
background-size: cover;
overflow: hidden;
}
html,body {
width: 100%;
height: 100%;
}
body {
position: fixed;
overflow: hidden;
}
position: absolute works for me. I've tested on Chrome 50.0.2661.75 (64-bit) and OSX.
body {
overflow: hidden;
}
// position is important
#element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
Bounce effect cannot be disabled except the height of webpage equals to window.innerHeight, you can let your sub-elements scroll.
html {
overflow: hidden;
}