V-Scrollable content with fixed header, both h-scrolling + fixed sidebars? - javascript

I'm trying to find a suitable layout for Snap.js:
http://jakiestfu.github.io/Snap.js/demo/apps/default.html
The issues with the recommended HTML / CSS are:
Header (navigation bar) is not sticky
Address bar does not hide in Chrome for Android as you scroll the main content down
Fixed sidebars don't move in sync with address bar
In my below fiddle, the main content is v-scrollable a little (?!) while it's moving to the right
I would like to have the header fixed, but it still needs to scroll vertically along with the content area. CSS doesn't seem to support this, so I tried a scripted solution:
animate();
function animate() {
requestAnimFrame(animate);
draw();
}
function draw(){
var pos = content.offset();
nav.css('transform', 'translateX('+ pos.left +'px)');
}
http://jsfiddle.net/HFjU6/2533/
Please tell me other options if there are any, I'm afraid of a broken UI if JS is disabled.
To make the address bar go away (a.k.a. "full-screen mode"), I had to make the content position: static;.
Downside: the v-scrollbar shows at the right window border, not at the right side of the content area. Is there another way?
The sidebars with position: fixed are independently scrollable from the main content if they contain overly tall content.
The problem: they don't move together with the address bar, but are re-positioned once the address bar is fully gone (standard behavior in Chrome for Android is to move the content in sync with the address bar, which sticks to the swipe input for a nice transition).
It works for position: absolute;, but that will make my sidebars scroll with the main content and you will see body background below 100% of the original height.
I can scroll the main content area slightly to the left while it is translated to the right and breaks the layout (may only apply to touch devices, but possibly to desktops too if you use the middle mouse button for panning). Why is this happening?

Related

Full Width Header Shifts as Scroll Bar Appears

I have a strange question -- my apologies if it is a silly one. Please note the code it too large to reproduce in a snippit so I am posting the link here.
The page I am building is a small intranet page with a full width header. When the user clicks on the button beside the submit button, a div from the top opens and pushes the content down. My problem is in my code editor there is no scroll bar on the page, so when the div opens it pops the entire page slightly over to the left to compensate for the scroll bar.
On codepen, I've pasted the shell of the site, but because a scroll bar is included in its code area, the problem cannot be reperoduced exaclty.
Is there any way I can compensate for the lack of scroll bar in my code? Perhaps force one to be there?
Any help would be grand.
You can force a vertical scrollbar by adding the following CSS rule to the body:
overflow-y: scroll;
EDIT: I misunderstood your question.
Have the whole moving element absolute positioned and wrap it around a container. The scrollbar will appear on the wrapping container, not on the element itself. And because it will be with position absolute there won't be any change of position once the scrollbar appears.

Detect HTML and CSS for a DIV and change to make it scroll with a sibling DIV

I am building a Google Chrome extension and one of the features it does is generate a full page length screenshot by snapping a screenshot image of the viewport then scrolling down the page and repeating the process until it has an image of the whole page length and stitches them together as 1 image using HTML5 Canvas.
Page elements that are position: fixed get changed to position: absolute so that it doesn't show the fixed element in each viewport image in the final image repeated over and over!
Now I have a page for example that gives a new challenge.
https://docs.hhvm.com/hhvm/installation/linux#ubuntu-15.10-wily-werewolf
Based on the image below...
1) the top header bar is fixed so it changes to position: absolute
2) the main page right scrollbar scrolls the main right content panel down the page.
3) the left sidebar has a separate scrollbar for it's DIV.
When my extension makes a screenshot on this page, it ends up repeating the left sidebar contents over and over all the way down the page since the right scrollbar goes much furthor down the page.
I think the solution is to somehow detect and make the left sidebar in these cases be positioned so that it does not have a scrollbar and instead will show all the left sidebar content as the right content DIV is scrolled down.
I am just not sure about how to do that left sidebar part at the moment, any suggestions? I would need to detect this situation on other pages automatically as well!
CSS overflow is what you are looking for, I guess.
Try setting overflow: visible to that sidebar. Now the "auto" value is likely to stand there.
What about detecting... You can check the scrollHeight of the element and get its height, for instance sidebar.scrollHeight > sidebar.offsetHeight. If it's true, it means it is scrollable.

sticky nav - JS Waypoints issue with custom sticky nav on browser resize

I have a demo of a custom sticky nav.
Demo: http://evanzio.github.io/custom-sticky-header-nav/
Repo: https://github.com/evanzio/custom-sticky-header-nav
Functional Spec:
Header should stick to bottom of client window when landing on page.
When scrolling down, the header should remain fixed.
Once first image has become fully visible, header should stop sticking to the bottom and continue moving with the scroll.
Once the header hits the top of client viewport it will then stick to the top.
This all works fine, until a window resize. Once the page is resized from large to small, the waypoints seem to mess up and the header sticks and unsticks at random points.
Steps to replicate issue.
Load page in large
scroll to bottom of the page
resize browser width to small
start scrolling back up and you will see it jump around and leave a white space where the header should be.
I believe on resize the waypoints should refresh automatically, so not sure why this is breaking? Anyone have any ideas?
Or any other ways to achieve the functional spec?
Thanks!
So after some playing around, I realised it was because I had a fixed position on a waypoint element. Which is a NO NO!

strange position of iScroll scrollbar

I'm building a touch-enabled html app and decided to use iScroll for scrolling within a div.
essentially, I've got two seperate scrolling divs but the scrollbars are always placed on the far outside of the page
http://jsfiddle.net/SRXMn/3/
the problem I'm having here is two-fold.
1) the scroll bars are both on the far right side (which doesn't make much sense for the left-scrolling content
2) the scroll bar extends all the way to the top of the header, when the only content being scrolled is below
when I set 'position:fixed' on the header, it shrinks down to a tiny size, and I can't seem to over-right that.
You could try using position:relative on div.scroll_hold

Scroll two columns independently using the browsers scroll

I have 2 columns of content, the left content has some fixed content at the top with some text at the bottom, the right column is a big long list of text & small images. Currently when I vertically scroll the browser the content below the fixed content on the left scrolls with the content on the right.
What I want is, if the content on the left fits within the browse window, not to scroll, if it does have enough content, scroll with the right column, but stop before all the content hides behind the fixed content, but without stopping the right column from scrolling.
Not sure if this is even possible, can't recall having seen it done before.
Thanks,
Chuck
something like this?: http://jsfiddle.net/S3xda/
things to be careful of:
only tested in the latest FF and chrome
not tested with contents of different length
in that example, i'm using a fixed height wrapper, as i needed to attach the scroll() event to it but you could use window on your own page.
ZenMaster has the right idea. The other part of this I would do "overflow-y: auto" on the fixed div, this will make it have its own scroll bar if the content you have in it is higher than the browser window.
What else you can do is just absolutely position the stuff at the top, to top, left and then position the stuff at the bottom for bottom, left - And dont do anything more than a total of 500px high in that box and the content should never need to be scrolled, the bottom stuff will always be at the bottom of the window and likewise the top stuff will always be at the top, while your user can scroll the big section up and down with the other side staying constant and static on screen...
Well zenmaster removed his answer for some reason, I thought it was pretty good.
anyhow, you want the one column to either be position: fixed or you could do it with absolute positioning. Set the height to 100% (body must also be 100% and any other containers, you need the 100% height to bubble all the way to the "window" and not some container in between. Also if you do position absolute, remember that the container of the absolute element needs to be relative if you are giving positioning coordinates to the absolute element.
I would prefer a plugin like THIS in that way you get a scroll bar for each and not scrolling on both. GL & HF
And btw this works in all browsers ie7-9 ff,chrome,safari,opera and so on (even works on mobiles)
I had a same problem as you and finally I have found this jQuery plugin http://dhlavaty.github.io/jQuery-SmartColumnScroller/ . It has nice demo which shows exactly the solution. It moves all columns on scroll. However when a column content ends the column stops while other still go. TADA!

Categories