I am currently working on a completly web-based app-looking layout.
My problem now is that the navigation makes a short jump when I let my S3 autoscroll to the topby dragging. If I scroll up normally (without releasing my finger) this problem does not occur.
It seems that there is a problem with fixed positioning and the regular browser-bar.
CSS:
#nav {
position: fixed;
bottom: 0;
..
}
Any ideas?
You can't make it scroll over other div's or anything. A screen following div on the bottom or top of the screen usually does not work great without javascript, jquery, or a huge css.
anyway,
Have you tried putting the margin on
margin: 0 auto;
Also giving it a specific size and/or height might help.
Did you try it cross browser?
Related
Nice new nav bar on stackoverflow. Looks like the bootstrap I am using. It has the same problem that my site does, the nav bar jumps slightly when clicked.
Any ideas how to fix it? I haven't looked too close, but I'm thinking there should be some sort of javascript fix to hold the screen until it repaints.
The reason why the navbar jumps is because at load time the browser calculates, based on the information it has about the content, that it won't need a scrollbar. Therefore it starts rendering using full viewport width. For a quick flash, until enough of the page has loaded to make the browser paint the scrollbar, the navbar is full-width.
That means, in desktop browsers, it is 17px wider than on pages with scrollbar.
Note: Before trying to fix this, please note it's only an issue on wide, pointer based devices. It doesn't exist on mobile/touch devices. Any method from below should be limited, using media queries or device detection, to desktop, pointer based devices.
A few methods on dealing with this:
give certain elements min-height property so that the browser will estimate the initial height of the page correctly (or at least more accurate).
give <body> a min-height of calc(100vh + 1px) on pages you are certain will have a scrollbar.
use overflow:scroll on <body> on pages that you know know will have scrollbar (always wrap this in a media query)
hide (as in: opacity:0) all above the fold content and fade it in when a particular element has loaded (typically used on window load event, but you could just use a particular HTML element for this, if the page is very long and you don't care about the bottom parts to be loaded when you paint the top) - this technique is widely used by AngularJs websites/apps, principle from ng-cloak directive, but with opacity. Effective at removing FOUC and this desktop scrollbar jump issue.
use a scrollbar plugin, removing the default scrollbar. Custom scrollbars are usually positioned absolute, over the content and don't influence content rendering.
(this is more of a hack, but I use it):
#media (min-width: $md-min) { /* 768px ? */
#navbar { /* assuming this is navbar */
position:absolute;
left: 0; top: 0; /* depends on layout */
min-width: 100vw;
}
body {
margin-top: 60px; /* navbar height #desktop */
overflow-x: hidden;
}
}
Note: This issue is also known as the modal overlay navigation bug, because when modals give body position:fixed in order to place the overlay, the navigation jumps to full width (as the body no longer has a scrollbar). It's a long discussion, with various fixes. example.
From my point of view, this is a fault of desktop browser developers.
Sidebar should never, ever, interfere with window width calculation. You either paint it over the content (only when the user scrolls?) or you paint it aside from the page in a manner that still looks good when you don't have a scrollbar.
It's not that hard.
I have been fighting with this thing for several weeks now. I just can't figure it out.
I'm trying to prevent horizontal scrolling of the body when the menu is open. Here is a complete jsbin:
http://jsbin.com/vopeq/38/edit
Seems like any solution only undoes other things that are working the way I would like them to. So I added the requirements to the jsbin to keep track of which are satisfied with each version.
UPDATE
Maybe it's too good to be true, but I think I have all requirements satisfied, but I still need to check on android devices:
http://jsbin.com/vopeq/61
The thing I learned, that was tripping me up for so long and I didn't realize it, is that overflow: hidden on the <body> element, in Mobile Safari, doesn't do squat! I had to move my styles to prevent scrolling down one level of elements.
And Ed4 pointed me in the right direction. I needed to set overflow: hidden on the parent of the element I'm moving with left: 85% instead of the element itself (I was trying to do it all on the <body>).
So I have a body > .container, on which I do the overflow: hidden and body > .container > .content, which I push over using position: relative and left: 85%.
Your question is more of a design spec than a question, so rather than try to design the whole layout for you, I'll point out why your jsbin doesn't work.
Don't try to set left on body. If body is protruding offscreen, you're not going to be able to reliably stop scrolling.
Instead, keep body stationary with 100% width and height, so it can serve as your visible window boundary. When you want to lock the scrolling, you can set overflow: hidden on body. Handle the slide-over and scrolling menu with separate divs inside body.
I'm using scrollr to make the first parallax website i've done, and after coming to test it on iPhone, i've noticed it didn't scroll. After googling I found you need a skrollr-body div, which i've added and put all the content in, but it only scrolls if there is a substantial padding at the top of this skrollr body, which isn't how I want it to work, or how it should.
This is the page:
edit: removed
Cheers
It will never scroll when the content can't escape the viewport because of this
#skrollr-body {
height: 100%;
width: 100%;
}
I am developing an extension that will insert a horizontal div at the top of all web pages. It works fine for most pages, but for http://google.com, google's navbar is displayed on top of mine. The stumbleUpon chrome extension has a similar feature, except their horizontal div is displayed above google's navbar. I'm using a content script to insert the div. I've tried body.prepend() and it doesn't seem to do the job.
Also, I would like the bar to be fixed at the top regardless of scroll position. I have it as position:fixed, top:0% but still no luck.
Any help or pointing in the right direction would be appreciated.
When dealing with situations like this, be sure to use the computed style box in the webkit inspector. It may take some time to find the right element with the styling that is causing you the issue but it's worth it.
I prepended a div to the body at http://google.com and applied the following styles:
element.style {
position: fixed;
top: 0;
left: 0;
height: 35px;
width: 100%;
background-color: red;
}
I noticed that the red was poking out from behind Google's nav bar so I figured it was probably a z-index issue.
I set the z-index of my prepended div to 99999 and it showed up as expected. Upon further investigation I found that Google's div #gbx3 has a z-index of 990 and the nav links inside it have a z-index of 991. You don't want to cover up the Google nav bar so we are going to have to set some custom styling on it.
If you style Google's div #mngb to
element.style {
position: absolute;
top: 35px;
}
This will push Google's nav bar down but doesn't move anything else on the page.
This should be enough to get you started. It's not perfect and it doesn't handle pushing any of the other content down and it isn't generalized for any other sites but it is a good start for you.
Good day,
I've been doing some modifications to this website and the owner wants to have a horizontal scroll bar appearing when the browser window is reduced to a size that is smaller than the 'container' of the website. Right now it doesnt appear.
I think that my main CSS is responsible for this.
This CSS has overflow-x:hidden; and overflow-y:auto; because it is needed for my "jquery sticky footer' to work properly.
How can I workaround this and let this have a scroll bar horizontally on the browser window when I reduce it ? It's costing me some braincells now.
This is my CSS , what I think is responsible for not letting me have the scrollbar.
BTW when I put overflow-x: auto; the scrollbar appears no matter what window size i have.
body, html {
margin: 0;
padding: 0;
text-align: center;
overflow-x: hidden;
overflow-y: auto;
Do you have anything inside body or HTML with a fixed size big enough to always make the scroll bar appear when you put overflow-x: auto? Where is this page located? If I start poking around with firebug, it might be able to help you out if it's publicly accessible.
-Brian J. Stinar-
overflow-x: hidden;
Its therefore hidden no matter what.
You say when you put auto it shows the scrollbar no matter what. This is likely because the 'container' is wider than the screen space available.
Maybe shrink your container to a smaller size will remove this, and only provide when the window is too thin. Be aware of other objects on the page which will widen the container.