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.

How to remove extra white space from website when viewed on mobile browser

Browser is rendering extra white space on the right side on mobile screens. I tried modifying the following properties without any progress:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
It still does not remove the extra white space. I also don't see any element overflowing from the side of the grid. Any ideas?
Thanks!
My website: fanismahmalat.com

It seems to be something odd happening when switching to mobile with the scrollbar leaving the white space.
I added the following into CSS in the Chrome inspector and it fixed the issue:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
I only tested this in Chrome, and again with the inspector, but this may help. I noticed you had height:1000px (hardcoded to 1000px). I'm not sure why exactly, but I think you can leave that as such if necessary.

The problem is in the image of the laptop that is exceeding in width.
https://i.stack.imgur.com/zlg6R.png

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

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

Android - Webkit : How to enable horizontal scrolling in div?

I trying to insert content into horizontal scrollable div using this code:
<div id="scrolly">
<div id="chartdiv_hourly" class="vh72" style="width:200%;">
</div>
</div>
#scrolly{
width: auto;
overflow: auto;
height: auto;
white-space: nowrap;
}
chartdiv_hourly
width: 200%;
overflow: hidden;
text-align: left;
Problem is that i cannot scroll horizontally on real device.
I tried to find any solution and i found:
https://github.com/davidaurelio/TouchScroll
But library seems to be obsolete, so i trying to find solution in pure CSS, is it possible?
Thanks for any help..

You are using automatic overflow.
Use this:
overflow: scroll;
Good Luck.

'scrolly' will need to have an absolute width set. Set to auto, I would expect it to just grow to fit the child content.