I've recently stumbled upon a rather interesting behavior related to browser scrollbars. Here is the link to demonstrate this: http://jsfiddle.net/5L7tyswh/5/
HTML:
<div class='container'>
<div class='fix' />
</div>
CSS:
body {
margin: 0;
}
.container {
position: absolute;
overflow: auto;
width: 100%;
height: 100%;
max-height: 400px;
max-width: 400px;
}
.noscroll {
overflow: hidden;
}
.fix {
width: 400px;
height: 400px;
background-color: green;
}
So the situation is basically this: I want a fixed sized div that is scrollable if the window becomes smaller than the minimum. I explicitly want the scrollbars to appear 'in the div' so I created a container that acts as the 'scrollpanel'. So far so good.
The strangeness comes when you shrink the window small enough for the scrollbars to show up, then enlarge it again. What happens is that the scrollbars don't hide as they should (at least I think it would be logical). I don't know if it is a bug or a feature, but my tip is on the former. My only explanation to this is that the vertical and horizontal scrollbars prevent each other from disappearing.
The workaround is the commented javascript, if you uncomment it the scrollbars behave as they meant to.
Can anyone explain this better?
Update:
I can only reproduce it in Chrome so far. It works in IE11 and Firefox.
Looks like a bug or a peculiarity of Chrome ;)
You can prevent the behavior in Chrome without javaScript and extra classes by using #media directive in your css
#media screen and (min-width: 400px) {
.container {
overflow: hidden;
}
}
This prevents the scrollbars to appear when the window is bigger than 400px. Works on all (recent) browsers.
Related
I have tried most of the suggestions I could find online, but I couldn't get anything to work.
My webpage content appears wider than screen size on mobile devices and some PCs
URL: https://www.ahhospitality.com
html, body,{
max-width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow: hidden;
height: 100%;
I have tried playing around with my CSS but still couldn't fix it.
Any help?
If you think that the website is actually displayed correctly but the user can scroll into a void to the left or right, try adding overflow-y: hidden; in CSS like this:
body {
overflow-z: hidden;
}
This may not be the perfect static solution but it works just fine. The overflow is then
probably caused by another element overflowing the edge of the body.
I've run into a very annoying issue only on iOS Safari 9+ (8.4 is fine) where, once the user quickly scrolls a page resulting in anchor links within fixed elements no longer being clickable due to the appearance and actual click/hit area not lining up with its element until the user scrolls again.
It doesn't happen the same way every time, and can take a few tries to "break" the system. Content must be longer than the viewport for this to work.
No workarounds to the problem yet. How can I solve this issue?
UPDATE: After further testing, the issue only happens with iOS Safari 9 and above, tested on iOS 8 and there is no problem.
UPDATE 2: It's now clear that this happens on most websites using position:fixed; and even position:-webkit-sticky;. You may want to check yours :)
HTML
<section>
<article></article>
<article></article>
<article></article>
</section>
<div class="sticky">
</div>
CSS:
html, body {
margin:0;
}
article {
display: block;
height: 200px;
width: 100%;
margin-bottom: 20px;
background: whitesmoke;
}
.sticky {
width:100%;
height:100px;
position: fixed;
bottom:0;
background: orange;
text-align:center;
}
.sticky a {
display: inline-block;
width: 100px;
height: 100px;
background: yellow;
}
http://codepen.io/toobulo/pen/dGEodo
The issue doesn't happen within Codepen editor, as it's related to mobile Safari's elastic / toolbar size changes. Please export code into own page, or use the following link:
https://cdn.rawgit.com/anonymous/3234ad797dd80e5f8905/raw/ab51c4d8621cfb827f83a33d21940579f8682cde/index.html
This problem is related to the bounce effect in ios and losing the toolbar & the header bar. The only way that i have found to fix this is to do the following:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: auto
}
You could do it on a breakpoint as well so it only works for mobile. Hope this helps.
** Added the overflow scrolling.
I found that andy jones's answer effectively fixed this problem for me, but it had an unwelcome side effect: momentum scrolling no longer worked. This made scrolling down long pages on an iPad take forever.
Combining andy's answer with this tidbit from CSS tricks made my links clickable while also allowing for momentum scrolling:
html,
body {
height: 100%;
overflow-y: scroll; /* must be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
I also found that the width: 100% style from andy's answer was unnecessary, so I removed that as well.
You can make .sticky a link absolute and apply following CSS so the link will be independent to the window/browser.
.sticky {
width: 50px;
}
.sticky a {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
I have this scrollable div, which (on my Mac in Chrome) hides the scrollbar when I don't scroll. On windows 8 however, it doesn't work in Chrome and Firefox.
Ie doesn't support this too, but I've enabled it using the following CSS:
-ms-overflow-style: -ms-autohiding-scrollbar;
Is there any way to enable this behaviour for Chrome and Firefox
Here is a jsfiddle
maybe you can use something like that?
body {
margin:0;
padding:0;
overflow-y: hidden;
}
body:hover {
overflow-y: scroll;
}
http://jsfiddle.net/4RSbp/165/
Scrollbar is hiding on your Mac because this is a system preference (System Preferences > General > Show scroll bars). And unfortunatelly there is no version of -ms-overflow-style for Firefox or Chrome.
For anyone comming here, if you want to hide scrollbars in a cross-browser cross-system way and keeping the scrollability enabled without visual glitching of mouse over rendering; hiding them behind the limits of your container is a good approach. (Beware, this will be long)
Let's say you have a scrollable container and you want to hide the vertical scrollbar (even the thin transparent one that moderns systems shows). its ID is #scrollable:
<html>
[...]
<div id="scrollable">Some Y large content</div>
[...]
</html>
To achieve what we want, #scrollable must be contained by a node exclusively for it (a div would work, in this example #scrollable-cover) and we must know #scrollable layout width and height. Lets say it'll be an area of 800px x 900px. So we got:
<html>
[...]
<div id="scrollable-cover">
<div id="scrollable">Some Y large content</div>
</div>
[...]
</html>
And its CSS:
#scrollable-cover {
width: 800px;
height: 900px;
overflow: hidden
}
#scrollable {
width: 820px;
height: 100%;
overflow: scroll;
}
With that, #scrollable will be stretched to the height of its inmediate parent (#scrollable-cover) and its large content will render it like an scrollable box, but, since its width is 20px bigger than its parent, which has an 'overflow: hidden' property, the scrollbar will not be shown, because it renders on the 20px hidden at the right of #scrollable.
This lead us to an inconvenient, the content of #scrollable could also be rendering in that hidden 20px width area; to avoid that, there is two methods. One is to wrapper all the content of #scrollable in a #scrollable-wrapper with 800px width and auto height:
<html>
[...]
<style>
#scrollable-cover {
width: 800px;
height: 900px;
overflow: hidden
}
#scrollable {
width: 820px;
height: 100%;
overflow: scroll;
}
#scrollable-wrapper {
width: 800px;
height: auto;
}
</style>
[...]
<div id="scrollable-cover">
<div id="scrollable">
<div id="scrollable-wrapper">Some Y large content</div>
</div>
</div>
[...]
</html>
This way all content will be rendered in a 800px width layout inside our scrollable box. But, if you dont want to add another element, you can solve this with the Second CSS only option, using box-sizing an a 20px padding at the right:
#scrollable-cover {
width: 800px;
height: 900px;
overflow: hidden
}
#scrollable {
width: 820px;
height: 100%;
overflow: scroll;
padding-right: 20px
box-sizing: border-box;
}
This way, anything rendered inside #scrollable will avoid the 20px hidden area at the right, and 'box-sizing: border-box' will tell the browser to include the 20px of the padding in the total 820px width of #scrollable (otherwise, it'll grow to a computed total of 840px). Check box-sizing compatibility here: http://caniuse.com/#search=box-sizing
And of course, this example could also work with horizontal scrolling, just increasing the height of #scrollable 20px above the height of it's inmediate parent. That's the clue ;)
For anyone who got here not because of system preferences, but because scroll bars in general are visible in on Windows Systems in Chrome:
Do not save your css like that:
overflow: scroll;
but rather
overflow: auto;
This way it will only show on Windows Chrome Browser if necessary.
found here: Hide useless scrollbars that show up on Windows only
On my current project I am in the process of building tablet and mobile versions of the site and am testing it within the browser at the different sizes, though I am coming across a problem when resizing the browser.
The current version of the site can be found at: http://beta.residencyradio.com
Basically whenever I resize the browser to check how it will look on the tablet for example, white space is rendered to the right and the x scrollbar appears, even though the width of the containing element has not been exceeded.
I can pretty much solve the issue by adding overflow: hidden but this disables x scrolling completely, which I don't want.
I have tested this across all major browsers, all respond the same, so it must be to do with the CSS, what exactly I'm not too sure, but it's probably something very simple that I've managed to miss.
Any help would be greatly appreciated!
Thanks in advance, Michael
That whitespace is being created because your #second div is being pushed outside the boundaries of the viewport. Instead of pushing that div using margin-left, use position:absolute; in its place to fix that issue.
This is how it is now:
#second .content {
margin-left: 22.8125em;
}
The .content div has a width of 60em as it is.
You can use something like this instead and it should work fine:
#second .content {
left: 170px; /* adjust to your liking */
position: absolute;
width: auto;
}
I think....
change in your css file:
from:
html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
}
to
html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
background-size:100% 100%;
}
It looks like that image (with the cool gradient) isn't stretching horizontally when the page is zoomed out
Is this it?
I did the following:
html, body {
width: 100%;
display: table;
}
And it removed the weird whitespacing while also allowing to scroll in the x-direction.
I usually fix it with
html {
overflow-x:hidden;
}
It should work and hide the white space and rescale the site
Tried
html {
overflow-x:hidden;
}
didn't work. But..
body {
overflow-x:hidden;
}
Did.
I'm building a site with a 1700px wide JS slideshow at the top. When I publish the page, I get horizontal scrollbars since my monitor is on a 1024px resolution. How do I get the site to be centered in the browser with no horizontal scrollbars - and whatever is superfluous on either side simply isn't visible to the user?
Help GREATLY appreciated, thanks!!!
Simple solution:
body { overflow-x: hidden; }
But this will also stop people scrolling if their monitor is smaller than the main width of your site.
The real solution is to simply not have it be 1700px wide all the time. Something like the following may help, but it depends on your HTML and how your slideshow is implemented.
#slideshow { width: 100%; max-width: 1700px; }
I haven't tested this, but you may be able to get away with putting the above CSS on a container element, something like this:
#slideshow-container { width: 100%; max-width: 1700px; }
#slideshow { width: 1700px; margin: 0 auto; }
You can do this pretty easily. jsFiddle example.
As you know the size of the div, use that:
div.slideshow {
position:absolute;
padding-left:50%;
margin-left:-850px; /* 1700/2 */
}