I have a mobile website that has a main wrapper with three divs inside - all are fixed height which add up to 480px total. The top two divs inside are headers which are pretty short, and the bottom one is where the main content is and has an overflow-y of scroll. I set the html and body to overflow-y:hidden. I want only the main content div to scroll vertically and absolutely nothing else, leaving the headers always visible in full.
When I view it in my desktop browser it works fine. In my iPhone simulator it scrolls correctly if I click and drag within that content div, but if I click and drag from one of the headers or I swipe with two fingers on my trackpad it scrolls the whole page, not just the content. This results in the top header getting scrolled off the page. I don't have a real iphone to test with, but I am told by my client that the same thing happens on her iphone.
I tried setting the height of the main wrapper to something very short (300px) so in theory there shouldn't be any need to scroll the page at all regardless of the overflow setting, but it still scrolls. I also tried visiting this very short page and even there in the simulator it scrolls a little. I also tried setting my headers to position:fixed but no luck.
How can I get the page to stop scrolling away from the headers?
You could bind a "touchmove" event to the two other divs, and use prevent default.
<div id="main-wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
The use jQuery and
jQuery(function($) {
$("#header").on(‘touchmove’, function(e) { e.preventDefault() });
$("#footer").on(‘touchmove’, function(e) { e.preventDefault() });
}
This will prevent the browser from doing it’s default behaviour.
Related
I'm creating an HTML page which is comprised of two sections; header and body. Rather than use a position:fixed header and allowing the whole page to scroll, I have used a normal header and made the body a scroll container. This is because there are fixed/sticky elements in the body which need to stick to the bottom of the header (and also due to problems with dynamic sizing of the header and body). The problem is that we have various UI elements which appear smooth across the header/body boundary. Our application's layout is responsive to screen size, and now the body may have a scrollbar, but the header doesn't, so they don't quite line up.
I have fixed this problem by having the body elements have a reduced width, and then using a position:absolute background div at the end, to overlap where the scrollbar would go, with the same background colours as the main UI element so they appear to be part of it. This means the header and body would keep a consistent width regardless of scrollbar.
The basic issue with this solution is that when the vertical scrollbar is shown, the browser also shows a horizontal scrollbar so that the user can "see" my placeholder background div, even though it doesn't occupy any of the width. I've tried a few different values for stuff like overflow, etc, but what it really boils down to is that none of them can show the placeholder divs when the scrollbar is not present without making a mess when it is present. There doesn't seem to be a CSS property for when the scrollbar is shown so that you can change the CSS as needed.
I've looked at e.g. scrollbar-gutter but we can't really use this as we need to continue supporting Chromium 88 as well as Firefox, iOS Safari, and similar. overflow:overlay would be ideal but isn't a well supported feature.
Some have suggested a mix of position:relative and position:fixed, but if I apply the right styles to get the element into the right place when there is no scrollbar, then it still causes the same issue when there is one.
Please see the following snippet (I tried the inbuilt one but it doesn't seem to work super well with content that requires scrollbars and such). I've created simple fixed-height divs to demonstrate the different content that I'm dealing with right now. The blue boxes should appear to go all the way across but don't need interaction right on that last bit. The red and green boxes should always line up, even though their layout is width-dependent and only the bottom section of the page scrolls if you shrink it down. These goals are achieved but when you shrink the page so that the vertical scrollbar is needed, the horizontal scrollbar also appears.
<html>
<head></head>
<body style="height:100vh;display:flex;flex-direction:column;margin:0">
<div style="height:200px;flex-shrink:0; max-width:calc(100vw - 17px)">
<div style="height:100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
<div style="height:100px;background:red;margin-left:200px; width:50%"></div>
</div>
<div style="flex-grow: 1; overflow: auto;">
<div style="max-width:calc(100vw - 17px)">
<div style="height: 100px;background:green;margin-left:200px; width:50%"></div>
<div style="height: 100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
</div>
</div>
</body>
</html>
the question is a bit more complex than the title can describe. I'm trying to make something like this:
There's a one page layout with content sections. Each section is 100vh, some of them are taller. When user scrolls down or swipes an animation occurrs sliding to a next section. When in a taller section user scrolls freely unless at the bounds of the section, then an animation occurrs.
I've come up with an idea that the browser's scrollbar should be something of a controller, that means it should indicate a position value that would be translated by JS to proper animation. I've created a fixed positioned container with the sections over page's body with its height set to the total sections height so the scrollbar indicates proper values.
The problem is I think I don't want the scrollbar to be visible, because it makes a little paradox when dragging it. Also there will be some content sliding in from the side with its own scrollbar. I think I can hide the scrollbar by doing some tricks if the scrollbar is in a div, not window, but it looks like when a fixed container is in a container with a scrollbar the scroll doesn't happen when the mouse is over the fixed container.
So now I'm stuck between having a window scrollbar and not being actually able to scroll over fixed container. I'd appreciate any help so much. Cheers!
some html just for codepen links to work:
<div class="fixed">
<div class="section-container">
<div class="section"><h1>section 1</h1></div>
<div class="section"><h1>section 2</h1></div>
<div class="section"><h1>section 3</h1></div>
</div>
</div>
codepen example with body scroll
codepen example with container scroll
You added scroll before fixed so it doesn't matter if you have scroll or not it is fixed so you cant scroll over fixed area only under.
On ipad there is a css declaration -webkit-overflow-scrolling:touch which provides fast bouncing scroll to any div with cliped content. But it has some differences against native ios scroll:
If it was never scrolled before (eg scrollTop property of parent div is 0) and one is trying to scroll it up, it doesn't bounce but scrolls a whole page up. Same situation for content scrolled to a very bottom and scrolling down.
If content insede scrollable container is smaller then container itself it doesn't bounce too but propogate scrolling to other elements up to the page instead.
Is there any way to make it behave exactly like the native ios scrolling, so touching the container will always scroll it but never the page.
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?
My company doc pages need to be laid out as specified in this image:
The iframes are handled by the doc team software, MadCap Flare. The problem we're having is that we'd like the breadcrumbs and topic heading/logo to be fixed elements at the top of the page and have the topic content be scrollable, without disappearing under the fixed elements at the top.
We'd also like for the topic content scrollbar to be the web browser scrollbar, and not an overflow scroller. Additionally, because we have fixed elements at the top, we need to avoid content disappearing under the fixed element such as when the page loads or a link is clicked to an anchor somewhere on the page (anchors load at the top of the page and not the top of the content table cell).
The built content looks like this:
<body>
<table class="superheader">
<tr class="topRow">
<td class="headingBreadcrumbs">
<div class="breadcrumbs">breadcrumb trail</div>
<h1>topic heading</h1>
</td>
<td class="headingLogo">
<img src="logo.png">
</td>
</tr>
<tr class="contentRow">
<td class="content" colspan="2">topic content - full of tables, divs,
paragraphs, lists, etc...</td>
</tr>
</table>
</body>
I'm not married to the inner table. I'll welcome a different solution so long as:
the breadcrumbs/heading/logo are fixed at the top so they're always visible.
topic content does not get hidden under the fixed top element, such as when the page loads or when clicking a link to an anchor.
the user can scroll the content using the browser scrollbar.
Doing it exactly as you mention with the scrollbars being native says Frames to me, though now I have to beat myself silly for suggesting it. Frames were annoying back in the early 90's when I got my start....
Something like JQuery layout would probably end up doing a lot more for you and could add the ability for the user to customize (to an extent) their workspace.
Since iFrames are also not exactly in vogue any more, you could draw that information directly in to the dom via jQuery Ajax or the like. At least that's how I think I would approach it.
Maybe something like this. It lacks equal height columns, but that can be acheived though.
Fiddle
Just a try! - Does not solve the scroolbar problem though. Downvotes desereved.
Try this out:
http://jsfiddle.net/k2R3G/
I have created this jquery plugin to solve a similar issue I was having where I had a centered container (tabular data) and I wanted the header to fix to the top of the page when the list was scrolled. One of the issues was, when the header became fixed, the content below it would jump up the page (not good). This plugin compensates for the "fixed" element and allows the content below it to position and scroll as it should, without having to set margin-top on my content, so the header can vary in height.
In the jsfiddle, I modified your layout a bit to use list items instead of tables.
Here is the link to this jquery plugin that may solve this problem:
https://github.com/bigspotteddog/ScrollToFixed
The description of this plugin is as follows:
This plugin is used to fix elements to the top of the page, if the element would have scrolled out of view, vertically; however, it does allow the element to continue to move left or right with the horizontal scroll.
Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down passed the target position, the element will be restored to its original position on the page.
This plugin has been tested in Firefox 3/4, Google Chrome 10/11, Safari 5, and Internet Explorer 8/9.
Usage for your particular case:
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>
$(document).ready(function() {
$('.topRow').scrollToFixed();
});