On the website I'm building I would like to integrate a horizontal position: sticky; scrolling section in the middle of a page. The page has vertical scroll. The user could scroll the section from A to Z with the vertical natural scroll of the page.
I found a perfect example of what I would like to achieve: https://nlkyt.csb.app
I don't find any resources on the subject. Does anyone knows how to create such effect?
Thanks!
I was looking for a similar effect when I stumbled upon this blog post. To sum it up you need three containers which we can refer to as:
space holder - This container will maintain the vertical space scroll space. More on this below.
sticky - This container will have a set height (100vh in my example). It will also be position: sticky; top: 0;.
horizontal - This container will contain the content that you wish to horizontally scroll on. Its width will be determined by the content that it contains.
To achieve the desired effect you must set the height of "space holder" to the width of "horizontal". Then on scroll you must horizontally translate "horizontal" equal to the offset top of "sticky".
If you're using react then follow the blog post from above. If you want the vanilla javascript version check out this codepen that I made.
Related
I have created a list using a block element contained in a view. When the block contains enough items, I am able to scroll vertically as intended.
The problem here is that, even if the block does not overflow vertically or horizontally, I am also able to scroll horizontally. This is illustrated in the following pictures:
Normal operation:
Scrolled horizontally:
Here is the ACSS for the containing view:
position: absolute;
top: 378rpx;
width: 750rpx;
Is there any way to constrict the block from scrolling horizontally?
So it turns out that a higher-order view accidentally had a width that was more than 750rpx and this allowed scrolling to the side.
Fixing that made that the list stays in the same place horizontally.
With fullpage.js I'm using fp-auto-height for auto height sections, but also using a nav to auto/smooth scroll sections. If you have a section that is taller than 100vh and scroll DOWN to it, fp aligns the top of the section with the top of the viewport so the extra portion at the bottom is off screen (thumbs up). However, if you scroll UP to it, fp aligns the bottom of the section to the bottom of the viewport so the top is offscreen. My headers get cut off.
Any way to get it to always align the top of the section with the top of the viewport when section scrolling (while keeping fp-auto-height)?
This is a situation where the site began with auto scrolling and now the client doesn't want it and I don't feel like removing fp altogether unless I have to.
I've been trying to create a couple of typical layout examples using Singularity, and I have a question about grid-span and floats.
I've created a sample scss stylesheet and html layout. Here's the complete example on Sassmeister.
http://sassmeister.com/gist/a7ca98b7520b12bd6241
My question is whether the containing content div <div id="content"> is necessary? I'm having to use it with a clearfix mixin in order to 'pull' the div down and keep the footer below the content section and aside.
Is there another way to achieve this layout with Singularity, without having to use the surrounding clearfix div? Is there an option for grid-span in the main section that will either not use a float, or self clear this section?
To understand your problem you have to learn how floats and clearing work.
0.
When you float an element, it is removed from the flow. It's vertical height does not count when calculating the height of the container.
1.
The intended usage of floats is to add images to a long sheet of text. The text would wrap around the floated image and increase its overall height and stretching the container vertically, just like an object submerged into water increases the height of water surface.
Before:
After:
2.
If the floated image is located very close to the bottom of the text, it will pop it's bottom out of the bottom of the container, just like an iceberg exposing it's top from the water.
3.
Now imagine that your text is comprised of paragraphs and each paragraph starts with a title. When there's an image floated at the bottom of a paragraph, the image would stretch into the next paragraph, pushing the next paragraph's title aside.
4.
If you don't want that to happen, you apply clearing to paragraph titles:
h2 { clear: both; }
This basically tells the titles: don't let floated images push you aside, let them push you down instead.
5.
But web pages have become more than formatted text, and HTML/CSS didn't provide any means of formatting layouts. So we started using floats for layouts. It's ugly, it's like using wallpaper to sew your clothes, but we have no better option (until Flexbox becomes a thing, and it seems to already).
What happens when you float all content in a container? There will be no flow left, no text to stretch the container vertically, and it's height will be zero (plus border and padding):
6.
You already know that in order to make containers regain their height (wrap around the floated content) we have to apply a clearfix to the container. But what a clearfix actually is?
When you apply a clearfix to a container, you use :after in CSS to create an additional element within the container, after all it's content. Then you apply clearing to the little mother fcuker:
.container:after {
content: '';
display: block;
clear: both;
}
7.
Now back to your question! What's the alternative of using the clearfix?
You've probably have guessed already.
If you've got got content below the floated element, simply apply clear: both to the next element below the floated one! Just like we did in #4 for paragraph titles.
In your case:
footer { clear: both; }
And here's a demo: http://sassmeister.com/gist/df8af8a3c7f8d3df2796
I have a static layout (750px width) and I'm trying to make it renders centered and disable the horizontal scroll as well.
I did dozens of searches in google, tried lots of different viewport settings but nothing worked.
This is the site: www.motocross.es
estilos_2012.css lines 18 and 11 have a min-width: 1200px for your body. take those off and your problem is solved.
also if you want to disable horizontal scroll an overflow-x: hidden on the element you want to prevent scrolling would do the trick. read more about it here.
That is because you have min-width:1200px on your body.
I have a long image that is currently serving as a navigation system for a site in development. You can see it here. This navigation system will eventually be split into smaller sections, but I imagine I may well see the same issues that I am seeing now.
The image is 1920px wide and the idea is that, however wide the user's browser window (up to 1920px), the navigation image (branch) will always extend off the screen. The leaves at the center of the navigation system should always be centred on the page to match the logo above.
The navigation DIV currently has the following CSS:
#nav {
position: absolute;
top: 210px;
left: 50%;
margin-left: -960px;
}
The body has a min-width of 900px.
There are two issues I am having with this setup:
As you will see when you visit the page, the width of the browser page is being set by the right edge of the long image for the navigation system, when I would like it to be set to 100% when the width of the browser window is greater than 900px, and to 900px (with horizontal scrollbars) when the width of the browser window is less than 900px.
The navigation system isn't respecting the min-width of the body, i.e. it continues to move to the left even when the width of the browser window is less than 900px, whereas the rest of the page content doesn't.
Could someone help with these issues?
Thanks,
Nick
What I would do is
Cut out the middle part of the image (the one with the actual content).
Take out a slice from the line background that can be repeated infinitely. Like so:
Put the middle part of the image into a div that is 100% wide and has
background-image: url(/path/to/slice.png);
background-repeat: repeat-x;
that will give you an infinitely resizable navigation area, without needlessly expanding the page.