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
There are a lot of posts on this site that I have read but nothing is working for me and I'm not sure why.
I'm trying to make a menu that "sticks" to the top of the page as you scroll past it and vice versa (stops sticking when you scroll back up)
Javascript
$(document).ready(function(){
var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100))
document.addEventListener("scroll",Scroll,false);
document.addEventListener("gesturechange",Scroll,false);
function Scroll() {
var y = $(this).scrollTop();
if (y >= top) {
$('#FloatingMenu').addClass('fixed');
} else {
$('#FloatingMenu').removeClass('fixed');
}
CSS
#FloatingMenu.fixed {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
background-color: black;
color: red;
}
#FloatingMenu {
background-color: red;
color: black;
width: 100%;
text-align: center;
}
I've tried doing repainting, i've tried stopping the "inertia" scrolling (which I can't get to stop on Chrome on iOS) Either way, everything I've tried has the same results. Works perfectly in a PC or on a Android, but on an iPhone, the menu will not repaint and be "stuck" at the top until the scrolling stops AND the finger is removed from the screen.
Is there a fix for this? Everything I'm reading suggests that there is but notn a single solution has changed anything for me.
The strange thing is, if your scrolling back up (the menu is already stuck at the top) and you scroll past it, it auto un-sticks (even while scrolling) and works fine.
The only time its a problem is when its "repainting" the "fixed" menu.
I hope there is a solution. Everything suggests that after iOS 8 it was fixed (and i'm testing on 10+) but It wont show the menu while scrolling until you stop and let go. Tested on an iPhone 6 and and iPad Air 2. safari and chrome, same results across the board.
I think I solved this question.
It's pretty funny.
Just add to style transform
transform: scaleX(1);
Or
transform: translateX(0);
And it's all
.fixedSidebar{
position: fixed;
right:0;
border:1px solid gray;
height:100vh;
width:17%;
max-width:70px;
transform: scaleX(1);
}
The problem is with position:fixed. This seems to have known issues with safari specifically on mobile devices. After doing some searches for hours, I believe that I may have been able to fix this issue.
The solution I used is to use position:-webkit-sticky for iOS safari and use position:sticky for desktop browsers. More documentation on this property can be found here :
http://caniuse.com/#feat=css-sticky
Can you please try the following code:
CSS:
#FloatingMenu.fixed {
top: 0;
left: 0;
z-index: 1;
width: 100%;
background-color: black;
color: white;
}
#FloatingMenu {
position: -webkit-sticky;
position: sticky;
background-color: lightgray;
color: black;
width: 100%;
height: 60px;
text-align: center;
padding-top: 18px;
font-weight: 800;
}
JS :
$(document).ready(function(){
var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100));
window.addEventListener('scroll',Scroll,false);
function Scroll() {
var y = $(this).scrollTop();
if (y > top) {
$('#FloatingMenu').addClass('fixed');
} else if (y<=top) {
$('#FloatingMenu').removeClass('fixed');
}
}
});
Please note that I have removed the fixed property completely and applied the sticky property to the #FloatingMenu selector itself. Seems to work for me on my iOS simulator safari, and iPhone 6 Safari and on Chrome & Safari in my desktop.
A simple working example of this fix can be found here : Link
Hope this helps. Cheers.
You shouldn't add any event listener for scrolling because it can produce several errors - maybe crashing your browser. This is the first thing you need to change:
JS:
$(document).ready(function(){
var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100));
function Scroll() {
var y = $(this).scrollTop();
if (y >= top) {
$('#FloatingMenu').addClass('fixed');
} else {
$('#FloatingMenu').removeClass('fixed');
}
setInterval(function() {
Scroll();
}, 120);
});
The second thing you need to fix is your "function Scroll". It's right: just a function maded to be called by a DOM element. But what if your event isn't triggered by a DOM element? Maybe that's your problem!
So you can even try adding Event Listener for scrolling just fixing that, but I don't recommend.
JS
function Scroll() {
var y = $('body').scrollTop();
if (y >= top) {
$('#FloatingMenu').addClass('fixed');
} else {
$('#FloatingMenu').removeClass('fixed');
}
PAY ATENTION:
If the first scrollable parent of #FloatingMenu isn't the <body>, you should fix that $('body').
I need to make a scrollable div, scroll even if the mouse is upon the content (inside the scrollable div), and not just beside it (Where it is blank). This is what I have so far:
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}
In Chrome is ok
In IE8+ is ok (i know a hack)
In Safari the content shakes a lot when i scroll, can i fix that? (I want fix this)
Working fiddle -> https://jsfiddle.net/8oj0sge4/6/
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}
#wrapper {
width: 100%;
height: 1500px;
border: 1px solid red;
padding-top: 380px;
}
#wrapper .container {
border: 1px solid green;
width: 100%;
height: 500px;
overflow: scroll;
}
#wrapper .container-scroll {
height: 1500px;
width: 100%;
border: 1px solid yellow;
position: relative;
}
#wrapper .main {
width: 200px;
height: 500px;
background: black;
overflow: scroll;
position: absolute;
color: white;
left: 50%;
margin-left: -100px;
margin-top: 10px;
}
<div id="wrapper">
<div class="container">
<div class="container-scroll">
<div id="main-site" class="main">
My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot!
</div>
</div>
</div>
</div>
Thank you guys.
I hope this demo helps you out to make the div content scroll when mouse hover and when mouse out of the div.
<html>
</head>
<style>
.mydiv
{height: 50px;width: 100px; overflow-y: scroll; }
</style>
<script>
function loadpage()
{ document.getElementById('marquee1').stop(); }
function marqueenow()
{ document.getElementById('marquee1').start(); }
</script>
</head>
<body onload="loadpage()">
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()" onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10">
This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test
content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content
</marquee>
</body>
</html>
you just add this js file to get a smooth scrolling effect.
https://github.com/nathco/jQuery.scrollSpeed
live deomo
http://code.nath.co/scrollSpeed
Not 100% sure what you are up to but you can get the fixed position with css "fixed". It will stay where you put it. The following css fixes to the bottom of the page.
.fixed {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: auto;
}
There is already an answer on scroll position:
How to get scrollbar position with Javascript?
I don't know important is that content, and by this I mean if it needs to stay selectable.
If not a pretty good solution would be to use #wrapper .main{ pointer-events: none; }, meaning that the content will not get any events from mouse and it would go through it to the next element behind it - in your case the scroll would go dirrectly to #wrapper.
Safari does this because every browser has its own scrolling. If you have a fixed header on a phone it acts bouncy and if you do this on a PC it acts normal. Explorer scrolls smooth and Chrome scrolls right to the place without a smooth transition.
The reason why your #main-site is "jiggling" is because the browser keep "repaint" the position of this element.
One Trick to solve this is called Debounce Function, (you may also google it to see other variations.) The basic idea is to delay the scroll event handler to clear out those untriggered callbacks.
In your case, you may do something like this:
main.parentNode.parentNode.onscroll = function(event) {
debounce(offsetting, 10);
}
function offsetting() {
main.style.top = Math.min(main.parentNode.parentNode.scrollTop,maxTop) + "px";
}
function debounce(method, delay) {
clearTimeout(method._tId);
method._tId= setTimeout(function(){
method();
}, delay);
}
If you keep seeing the jiggling issue, you can simply edit the delay parameter (i.e, change 10 to 50). The downside for that is your #main-site element will be 'cut off the top` for a while, depending on your delay settings.
Since your code works perfectly on Chrome and IE, there might be a bug on scrollHeight or offsetHeight attribute on Safari. I recommend you to use getBoundingClientRect for calculating element position since this method is more reliable and accurate.
var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;
I have a web page where I want to use the full height (no more, no less) of the screen with two stacked divs, so that the second div fills out the height that remains after the first one.
At the moment I am doing it like this:
css
body { height: 100%; }
JavaScript
window.onload=function(){
document.getElementById('div2').style.height =
(document.getElementById('body').offsetHeight -
document.getElementById('div1').offsetHeight) + 'px';
}
This works fine, but in mobile browsers (tested on Android default browser and Chrome) the address bar remains visible, although it can be hidden and the space used for the second div. I assume similar behaviour can be expected from iPhones.
So my question is: Does anyone know how to get the available height in a mobile browser, including retractable address bar?
edit
Ifound this:http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/, but I can't get it to work in Chrome.
update
I am now using this code, but it still doesn't work in Android Chrome (and I haven't tried it in iPhones).
JavaScript function:
if(typeof window.orientation !== 'undefined') {
document.body.style.height = (window.outerHeight) + 'px';
setTimeout( function(){ window.scrollTo(0, 50); }, 50);
}
document.getElementById('div2').style.height =
(document.body.offsetHeight -
document.getElementById('div2').offsetHeight) + 'px';
I am calling this function in window.onload and window.onresize.
Try this:
HTML
<div class="box">
<div class="div1">1st</div>
<div class="div2">2nd</div>
<div class="clear"></div>
</div>
CSS
html, body { height: 100%; }
div.box { background: #EEE; height: 100%; width: 600px; }
div.div1{background: #999; height: 20%;}
div.div2{ background: #666; height: 100%; }
div.clear { clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px; }
See the demo.
Hope it helped.
The little popup window appears in the middle of the original page.
The original page is covered by grey shade if not by the popup window.
The underneath original page can still be scrolled up and down.
Follow these steps:
1) Create this CSS rule:
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background: #666;
filter: alpha(opacity=50); /* opacity for IE browsers */
}
2) Add this code to your jQuery:
$("body").prepend("<div class='overlay'></div>");
3) When done, remove it like this:
$(".overlay").remove();
Didn't test this, but it should work (maybe with very minor modifications). This is one way, if you prefer doing it by yourself. You can, however, use existing solutions such as Twitter's Bootstrap lib which is cool, and I recommend it.
http://twitter.github.com/bootstrap/
Regards.
You could use the JQueryUI dialog widget http://jqueryui.com/dialog/#modal
This is easy enough to achieve with some simple CSS...
The overlay (the grey background) is fixed in place and covers everything below:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
z-index: 2; // above content
}
The "dialog" itself is similar in style, but smaller:
#dialog {
display: none;
position: fixed;
width: 500px;
height: 250px;
background-color: #fff;
z-index: 3; // above 'overlay'
}
The top and left attributes can be calculated with simple JavaScript, so that the dialog can be positioned in the center of the browser:
positionDialog = function() {
if (typeof window.innerHeight != 'undefined') {
dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
}
}
And also upon window resize:
$(window).resize(function() {
positionDialog();
}
Notice how the CSS sets these DIVs to display: none. They are hidden until called, which is done by setting them to display: block.
These days, I find that it's much simpler and more robust to rely on jQuery UI's excellent dialog widget.
It's called a light box. There's a way that you can do it using only CSS:
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
The key for darkening the background is the CSS opacity property of a box that you cover the background with, which you can set a black background and use this CSS for transparency:
-moz-opacity: 0.8;
opacity:.80;
You could take a look at the modal included in Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals
I am using Flot to graph some of my data and I was thinking it would be great to make this graph appear fullscreen (occupy full space on the monitor) upon clicking on a button. Currently, my div is as follows:
<div id="placeholder" style="width:800px;height:600px"></div>
Of course, the style attribute is only for testing. I will move this to CSS after during the actual design. Is there anyway I could make this div fullscreen and still preserve all event handling?
You can use HTML5 Fullscreen API for this (which is the most suitable way i think).
The fullscreen has to be triggered via a user event (click, keypress) otherwise it won't work.
Here is a button which makes the div fullscreen on click. And in fullscreen mode, the button click will exit fullscreen mode.
$('#toggle_fullscreen').on('click', function(){
// if already full screen; exit
// else go fullscreen
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
$('#container').get(0).requestFullscreen();
}
});
#container{
border:1px solid red;
border-radius: .5em;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>
Toggle Fullscreen
</p>
I will be fullscreen, yay!
</div>
Please also note that Fullscreen API for Chrome does not work in non-secure pages. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
Another thing to note is the :fullscreen CSS selector. You can append this to any css selector so the that the rules will be applied when that element is fullscreen:
#container:fullscreen {
width: 100vw;
height: 100vh;
}
When you say "full-screen", do you mean like full-screen for the computer, or for taking up the entire space in the browser?
You can't force the user into full-screen F11; however, you can make your div full screen by using the following CSS
div {width: 100%; height: 100%;}
This will of course assume your div is child of the <body> tag. Otherwise, you'd need to add the following in addition to the above code.
div {position: absolute; top: 0; left: 0;}
CSS way:
#foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
JS way:
$(function() {
function abso() {
$('#foo').css({
position: 'absolute',
width: $(window).width(),
height: $(window).height()
});
}
$(window).resize(function() {
abso();
});
abso();
});
For fullscreen of browser rendering area there is a simple solution supported by all modern browsers.
div#placeholder {
height: 100vh;
}
The only notable exception is the Android below 4.3 - but ofc only in the system browser/webview element (Chrome works ok).
Browser support chart: http://caniuse.com/viewport-units
For fullscreen of monitor please use HTML5 Fullscreen API
.widget-HomePageSlider .slider-loader-hide {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10000;
background: white;
}
Can use FullScreen API like this
function toggleFullscreen() {
let elem = document.querySelector('#demo-video');
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
Demo
const elem = document.querySelector('#park-pic');
elem.addEventListener("click", function(e) {
toggleFullScreen();
}, false);
function toggleFullScreen() {
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
#container{
border:1px solid #aaa;
padding:10px;
}
#park-pic {
width: 100%;
max-height: 70vh;
}
<div id="container">
<p>
Toggle Fullscreen
</p>
<img id="park-pic"
src="https://storage.coverr.co/posters/Skate-park"></video>
</div>
P.S: Using screenfull.js nowadays. A simple wrapper for cross-browser usage of the JavaScript Fullscreen API.
This is the simplest one.
#divid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
u can try this..
<div id="placeholder" style="width:auto;height:auto"></div>
width and height depends on your flot or graph..
hope u want this...
or
By clicking, u can use this by jquery
$("#placeholder").css("width", $(window).width());
$("#placeholder").css("height", $(window).height());
Use document height if you want to show it beyond the visible area of browser(scrollable area).
CSS Portion
#foo {
position:absolute;
top:0;
left:0;
}
JQuery Portion
$(document).ready(function() {
$('#foo').css({
width: $(document).width(),
height: $(document).height()
});
});
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
With Bootstrap 5.0 this is incredibly easy now. Just toggle these classes on and off the full screen element.
w-100 h-100 position-absolute top-0 start-0 bg-white