Prevent "overscrolling" of web page - html

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;
}

Related

Hide Scrollbar IFRAME 100%

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;
}

Scrollbar Not Showing in Chrome With Overflow-y: scroll

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;
}

Absolute background on pseudo-element ::before on IE 11

My problem is pretty weird. I have a background in a container::before, absolute-positioned and on every browser it works perfectly.
On IE 11 when I first load my page, my background only takes the width of my container (both sides are not visible). When I open my debugger or when I move the window the sides are revealed.
I tried this hack but it doesn't work.
.connexion-layout {
position: relative;
overflow: hidden;
}
.connexion-layout .container {
padding-top: 200px;
padding-bottom: 200px;
}
.connexion-layout .container::before {
content: " ";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
background: none no-repeat center center / cover;
}
#media screen and (min-width: 980px) {
.connexion-layout .container::before {
background-image: url("../../theme/images/connexion-bg-desktop.jpg?1433411383");
}
}
#media screen and (max-width: 979px) {
.connexion-layout .container::before {
background-image: url("../../theme/images/connexion-bg-mobile.jpg?1433411383");
}
}
Have you ever had something like this?
Adding position: relative; to the parent fixed this exact same bug for me.
When you say "it corrects itself when I resize the window or open the console" you are actually saying "forcing a browser repaint".
I haven't encountered this exact issue, but I did have a similar one with webfonts in Chrome a while back. It had to do with the order of loading.
So, based on that information, I'm going to guess that because the browser renders things in order, it's rendering the :before element first, then the parent element. However, the :before element's position is based upon the parent element (which it hasn't loaded yet) so it goes to the next available positioned element. When you resize, everything is loaded so it's fine.
There are two things I would try.
First, if you can, move it to the :after element. That may fix it. Since it is absolutely positioned, the :before vs :after shouldn't matter.
If that isn't possible, you can use a javascript/jquery repaint hack.
if($('html').hasClass('ie11')) {
$('.connexion-layout').hide(0, function(){$(this).show()});
}
Alternatively, you can try this in CSS. Load it at the bottom of your CSS. Again, this was meant for fonts but it should force a repaint regardless:
.ie11 body {
animation-duration: 0.1s;
animation-name: repaint;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-delay: 0.1s;
}
#-webkit-keyframes repaint {
from { opacity: 1; }
to { opacity: 1; }
}
Both the jquery and css assume you have a classname of ie11 on your <html> so that you don't unnecessarily repaint other browsers.
I don't have a PC at the moment, so please let me know if none of these work and I'll find my BrowserStack login and give it a whirl.

SVG Height Larger in Safari

Been working on a site for quite a while and almost have it done. I am now mainly dealing with an SVG issue in Safari & Chrome (webkit based browsers). When I load the SVG on the homepage there it is larger than in Firefox and IE. This causes the image (head of the hat man) to slightly be cut off or hidden as it is displayed as larger image than in Firefox for example.
Safari screenshot:
Firefox screenshot:
I found this thread on SO. There they suggested to use:
svg { max-height: 100%; }
This CSS change as it is on the site:
.hatman {
position: absolute;
bottom: 15px;
left: 50px;
right: 30%;
}
.hatman .hatman-slide {
height: 100%;
max-height:100%;/*added as suggested */
width: 100%;
}
.hatman #profile {
position:absolute;
left: 0px;
}
.hatman #hat {
opacity: 0;
}
That did however not work for me. The answer was not accepted by the OP either. Another similar issues is described at SO here, but no answer yet either. Has anyone a suggestion how to fix this?
In the end this was more an issue with Webkit dealing with the SVG resizing.
This JavaScript was used to fix the max height issue
function TSafariFix() {
jQuery(window).resize(function() {
TSafariFix_Resize();
});
TSafariFix_Resize();
}
jQuery(document).ready(function(){
Hatman = new THatman();
SFix = new TSafariFix();
});

ie9 scroll bar and etched border always showing on object

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.