On iOS, as you scroll on Google's I/O Event page, the height of Safari's address bar does not get reduced. However, if you scroll on ANY other website, Safari's address bar shrinks.
How is this achievable? I've been trying to look through their CSS code. I think they're using Polymer for their site.
Scrolled to the bottom of the page in both screenshots, see the height difference in Safari's address bar.
I don't have an iphone at hand to test it but I think this is because they have
<core-draw-panel> set to overflow: hidden;
and child element
<div main> set to overflow-y: scroll;
I think this prevents url bar hiding on scroll.
Related
I tried to understand how css env works but I cannot... I have problem with my sidebar and chrome search bar that hides after page scrolls down a bit. Otherwise using 100vh for my sidebar with scroll, some content stays hidden under the page so user needs to scroll page to scroll sidebar to the bottom of it.
I tried using these but I do not understand them either way:
height: env(safe-area-inset-top, calc(100vh - 56px));
And as I found somewhere, 56 is for phone size, but where is tablet size bar etc?
Is there actual solution for this? Without using media for displays and setting different heights?
I have a single web page that has an annoying visible scroll bar. I want to get rid of the scroll bar when the website is at full screen. I've tried using overflow-y:hidden; but the problem with that is when I try to resize the window the navbar pushes all the content down the web page and overflow-y:hidden; makes it impossible to scroll to view the content.
I'm not sure if it's something wrong with my background because I'm not using an image, just a gradient, and I don't want my navbar to overlay the website.
I have website that works well if opened in desktops and android device, but when I open in iOS devices such as Iphone and Ipad, the background did not fixed like on other devices, it will expand the background and create blank space on the right side of the page, and I used user-scalable=no to make user cant scrolling to the blank space, but still not works. Actually, I already use overflow-x: hidden; but my navbar didnt work like usual, the href didnt go to the target id. For example, news</li> it should go to the div id news, but it go randomly. So, what I should I use to prevent user to scroll in iOS?
this is the example of the blank space in iOS:
iOS safari has it's own set of issues. It generally tends to ignore all overflow: hidden you give on body and html. The only solution that i found till now was to either make you body exactly the size of your viewport and scroll the content within, or just make the position of the body fixed, in case your background is scrolling when you have a floating content on top that you want to scroll.
I have a web page I am designing which is almost finished. I have an icon to the right of the page which is used to display a menu when clicked, and it is right-aligned to the page. Currently, this icon and everything else on the right hand side of the web page is being covered by the vertical scroll bar. The current behaviour is that it appears only when the mouse curser is hovering over the browser window. I am wondering how it is possible to display the vertical scrollbar within a web page "always", when the page is scrollable (when the page height is greater than the height of the browser window).
For reasons of style, you can always show the vertical, native, web browser scrollbar using the following CSS property overflow-y : scroll; (see Mozilla documentation) to your body :
CSS
body
{
overflow-y : scroll;
}
JSFIddle
When making a site that doesn't require scrolling, the content is centred. I have placed all page content within a div : #Pagecontent, which has its margins set to auto so that the width of the screen does not matter - the content is always in the centre.
However, when the page requires scrolling because of the length of the content, all of the content on the page shifts slightly. How can I prevent this, as I find it annoying.
Hope this is an okay question. Cheers!
you can show the overflow all time by css overflow:scroll so the page wont move on the scroll bar
The HTML with overflow: scroll will force the page to always show the scrollbar whether it needs it or not.
html{
overflow:scroll;//for both vertical and horizontal
/* overflow-y: scroll; // for only horizontal
overflow-x: scroll; // for only vertical */
}
But there is no way you can prevent scroll bars appearing on any normal site because it is 100% dependent on the visitors screen resolution and/or preference for a maximised window or not.
The only way to prevent scroll bars shifting your page contents is to disable them via javascript, which may make some of your page unreachable by some visitors
Good read: How to prevent scrollbar from repositioning web page?