Is it possible to design page like on this picture:
I need reach only three goals:
First content can be scrolled only vertically.
Second content can be scrolled only horizontally.
Must be used only browsers scrollbars.
p.s. Better if we will not use javascript code.
Yes, this is possible.
The real difficulty is to add scrollbars outside de views.
But when done, you can easily scroll to a position your scrollviews.
I don't think this is really a good feature to make this but why not.
Be strong!
Related
I am working on building sticky sidebar behavior that will run alongside a vertical feed which is very similar to a facebook feed on desktop web. position: sticky works well for the easy use case where the sidebar is shorter than the height of the viewport. However if your sidebar is larger than the viewport the sidebar needs to have some scrolling mechanism so you can see the bottom of the sidebar as you scroll down the feed.
I am trying to recreate the facebook sidebar sticky scroll here.
The best way to understand the desired behavior is to test out your facebook feed and shrink your screen height so that your viewport is smaller than your sidebar height. I'll try to summarize here:
When your viewport is taller than your sidebar (simple case)
The sidebar behaves exactly as you'd expect with position: sticky. The sidebar stays in the same place and follows as you scroll down and up.
When your viewport is smaller than your sidebar
When you scroll down initially the sidebar scrolls with the feed (they appear fixed together)
When you get to the bottom of your sidebar, it then locks at the bottom and as you scroll down more, the sidebar now appears sticky with the bottom fixed
When you now scroll back up, the sidebar once again appears attached to your main feed, and scrolls up with the main feed. Once you hit the top of the sidebar it's then sticky with the top fixed.
So between those two states (top fixed when scrolling up, bottom fixed when scrolling down), the sidebar scrolls in unison with the main feed.
It's a very nice scrolling experience but very hard to recreate.
I have accomplished the states listed in steps 1-3 above by applying position sticky with a top position, and when you scroll down, using scroll events and some viewport/sidebar height calculations to determine the height difference and adjusting the top css value so it locks when the bottom is lined up with the screen (essentially initialTop - (sidebarHeight - viewportHeight). I cannot figure out steps 4, and 5. The best I could do was transition between the two top values depending on your scroll direction but it's a very bad UX.
I have a sandbox example of a layout here: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark
There's a basic layout with 2 columns (left sidebar and main feed). And there's a react component called StickyScroll which wraps around the column and has all the logic to update the top value. This may be a completely wrong start to a good solution, but any help is greatly appreciated.
I was interested in this as well, so I spent some time studying how fb does it.
It's very clever, my hat off to whichever fb dev originally implemented this.
You have to set the top / bottom css properties on the sticky depending on the direction of scroll, and to keep things from jumping around, you also have to calculate the height of an the element above the sticky, based on scrollTop.
Here is a rough example, which demonstrates the logic in action
I try to make a mock up by your sandbox code based on facebook redesign 2020.
hope you find the answer here. I like this approach because it's not very complex. More precisely, I use the css solution when I have to create a component similar to the Facebook sidebar.So i'm not using your StickyScroll component. Hope you find something.
Codesandbox Independent Scroll
Goal
I am trying to implement a layout that works as follows:
Page content is responsive and adjusts to window width
If the page contains a large data table, the table will overflow to the right
In this case, a scroll bar on the window (not on the table) will be shown
If the user now scrolls to the right, only the table scrolls, not the rest of the page
Sidebar, header, footer (all with fixed height/width) should be present
Example
Here is a jsbin with a very hacky implementation, that should illustrate what I mean: http://jsbin.com/gonezaqala/1/edit?html,css,js,output
Issues
Frequent problems that I ran into:
I figured that I need to use position: sticky to make this layout work but since elements are only ever sticky relative to their parent, I need to try to keep the sticky elements at a top level
Alternatively, I can create a separate container that does the horizontal scrolling (like in the jsbin example), but then trying to make this fit with the other parts of the layout (sidebar, footer) because really painful
I also want to implement this in a way that all the elements in the main content area (so everything but header, footer, sidebar) are together in one single container, since I am using AngularJS and this is where my router would inject the view
Question
I am sure, I have seen this kind of behaviour before, but I can't remember where it was. So my questions are as follows:
Is this a somewhat common UI pattern? Does it have a name?
Is it possible to implement a layout like this with only CSS?
Would it anyway be desirable to create such a layout or are there any concerns from a UX perspective?
I have a web application with a robust table which unfortunately has to be quite wide and high.
Fiddle: http://jsfiddle.net/orechova/ATKrU/17/
You can see that it is quite unconfortable to have to scroll right only to achieve the vertical scroller of the table.
It is problematic to move the scroller to the left with direction: rtl if a table is inside. I could have some jQuery scroller, but that wouldn't have the same design as the others. I had this idea that it would be possible to somehow scroll the table with the main scroller - the one of the browser window. Could I achieve this?
Any ideas are welcome
Ok, so I've made a decision to leave it as it is for now and later rebuild the page with fixed positions for all other elements except the table, which could be then scrollable by the browser application main scroll.
If you view this HTML css site in either 1024x768 resolution or on a mobile device, the content that extends vertically beyond the browser is hidden and there is no vert scrollbar to do so. Is there any way to force it?
www.marketbridge.net
thx
On Apple OS, scroll bars are never shown anymore. I often find this a nuisance also, but I guess MacOS/iOS users are used to this. You could make some flyover indication with JavaScript using scroll height and scrollposition, but I guess you're better consistently using a pagefooter. This way the user 'feels' there is still content.
Another way to achieve this is only the upper half of the last displayed line of text is displayed (through JavaScript). The same effect is reached by displaying a rectangle with increasing opacity (0 to 100%) over the bottom of the viewport that makes the bottom of the viewport seem to fade out. If you make sure the page's bottom padding is equal or greater than the gradient, you have a nice indication of continuation, and the good thing is you can do with pure HTML and css.
I want to create a box-menu on the very bottom of the browser window.
It should stay at the bottom when the content doesn't fill up the entire screen
When the content overflows it should only be at the bottom when you scroll down (i.e. you can't see it if you don't scroll).
How do I do this?
I think what you are looking for is called a "sticky footer", and there are a couple of methods. I suggest you have a look at these sites:
http://ryanfait.com/sticky-footer/
http://www.cssstickyfooter.com/
Zoom in/out on each site in order to see how this appears when the content reaches the footer or does not.
Both methods fall short on one thing: They require you to know the height of the footer - but I have not seen any better solutions with only CSS.