Develop Reference

Does the value of window.scrolltop() change when toolbar/addressbar on mobile devices collapses

I am doing some calculations with $(window).scrollTop();, element.innerHeight();, $(window).height();, element.offset().top;. And i've noticed that the result is different on mobile devices due to the toolbar from chrome and safari. My question is do any of those values change when the toolbar collapses and what can i do against it.

I had the same issue in the past, and solved it by setting the position as fixed for the body. Maybe that will help you as well.
html {
overflow: hidden;
width: 100%;
}
body {
height: 100%;
position: fixed;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
I found a very similar question here, also there is a jQuery.documentSize solution on github which detects the real width and height of the document.

Safari won't let me full screen a popup with overflow hidden

Currently trying to have a full screen popup in safari when the user has a small screen (e.g. Iphone 5). In chrome this works as expected but cant seem to figure out how to make this work on safari.
The idea is that the popup should take up the whole screen of the device and should only scroll with the content of the popup (so not the entire html document).
See the jsbin for full code.
As mentioned this works on chrome, not on safari for some reason...
I've scanned multiple articles and found that you need to apply the following to both body and html. This however doesn't solve the issue.
.no-overflow {
overflow: hidden;
position: relative;
height: 100vh;
}

I have also encountered this problem, And I found two ways to solve this err in the Google.
=============================================
the First Way:
edit css:
body {
position: relative;
overflow-y: hidden;
}
but this way in my environment did not work.
the Second Way:
edit css:
body {
position: fixed;
overflow-y: hidden;
}
but this way will upset the layout.
============================================
I started to trying other ways, and I found a solution with my team finally.
edit css:
body {
overflow: initial;
}
hidden-div {
overflow: hidden;
height: 100vh;
}

How to disable scrolling on mobile browsers?

I'm trying to disable scrolling on a web page when an user open a popup (but he can scroll it).
The popup element has following attributes:
#popup {
display: none;
width: 100%;
height: 100%;
z-index: 10;
position: fixed;
background-color: #3F3F3F;
overflow: auto;
left: 0;
top: 0;
}
And when the user opening a popup, the following code is called:
$('#popup').show();
$('html').attr('style', 'overflow: hidden;');
$('body').attr('style', 'overflow: hidden; position: relative;');
This solution perfectly work on a desktop browser, but unfortunatly not on mobile.
On mobile, it always possible to scroll (but the scroll speed is slow).
How can I disable also scrolling on mobile browser?
Thanks in advance.

Change body position to fixed. That will disable the scroll.

using jquery scroll on ie11 issues with jittery elements

I just encountered a strange issue on ie11. I am trying to create a fixed element that will scroll along with window scroll.
$(window).scroll(function() {
var scrollY=$(this).scrollTop();
$('.myelem').css('transform', 'translateY(' + scrollY + 'px)');
});
I have also created a fiddle of this:
https://jsfiddle.net/fyngwnz6/1/
(This is for replicating the issue, I know this particular case could be solved with a fixed element)
The code works flawlessly with no performance issues on every browser, except ie11. When using the scrollbar 'myelem' element scrolls with just a small jitter which becomes more obvious when using the mouse wheel. However, where you can really see the issue is when using the scrollbar buttons. It seems like the render of the scrolling has to finish in order for js to track the scroll.
I saw that there were issues with ie11 and smooth scrolling, but this is not the case here. Is there any kind of solution to this? Am I missing something?
edit: although I have an answer that seems to solve the issue, actually what I am looking for is a solution to elements that have overflow:hidden applies on them and the scroll is taken from an overflown element rather than body scroll; a similar scenario can be found here:
http://www.fixedheadertable.com/
If 'fixed column' is enabled in the example, then clicking on the scrollbars shows the jerkiness in the movement.

It seems like adding height: 100%; and overflow: auto; to the html, body elements removes the IE 11 issue:
JsFiddle Demo
[Edit]: Adding margin: 0; removes double scrollbars.

for edge use:
/*Edge - works to 41.16299.402.0*/
#supports (-ms-ime-align:auto)
{
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
position: relative;
}
}
/*Ie 10/11*/
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
position: relative
}
}

iPhone Web App - Disable body scrolling but allow on all elements within body

I am currently using the following code to disable the html and body from scrolling:
document.ontouchmove = function(event){
event.preventDefault();
}
This works but it disables all native scrolling within the page. I have seen many topics about this on this website but I have not seen a clear answer or example of it allowing scrolling on any other element within the page without having to define one.
Can you just disable the elasticity of the scrolling and then scroll the body with -webkit-overflow scrolling?
If anyone knows an efficient way to do this I would be very grateful. Thank you.

The most efficient way would be to use css?
html {
overflow: hidden;
height: 100%;
}
body {
margin: 0;
height: 100%;
background-color: red;
}
.container {
overflow-y: scroll;
height: 100%;
background-color: green;
}
http://jsfiddle.net/xBuhy/