first off I'm a total noob and I know i go about things the wrong way.
Ok, so here's what I'm trying to do:
I have a website that's basically just one image that's super long. In said picture I have different places that I want the snap scrolling to stop at. So basically what I'm thinking is that I have a y mandatory scroll snap where it snaps according to set pixels or percentages. Instead of containers. I've been trying to google and bend the results I found into what I need to no avail.
I want internal CSS because it's easier for me :)
Do you have an idea of what I should do?
Do you understand the question? If not I'll try to explain more.
.scroller {
scroll-snap-type: y mandatory;
scroll-snap-destination: 0% 100%;
scroll-snap-points-x: repeat(100%);
}
.page {
scroll-snap-align: start;
}
Related
The bounty expires in 4 days. Answers to this question are eligible for a +50 reputation bounty.
rbhalla wants to draw more attention to this question.
Here is an example: https://codesandbox.io/s/spring-wood-0bikbb?file=/src/styles.css
To replicate:
focus the input at the top
scroll all the way to the bottom, click on an empty space
notice that the screen jumps back up to the top to the snap target
What I've determined seems to be contributing to this:
The scroll window being ontop of a space with no snap target in proximity
The input width being resized on focus/blur
What the demo does:
On focus/blur of the input, a class is attached/removed from the container element.
That class changes the width of the container
The input container is the only element with scroll-snap-align set.
Question: what is causing this jump to occur, and how do I stop it?
It seems you have stumbled onto a chromium bug. Nowadays they are a little less common, but still not that rare. We tend to find them in the edge-cases of new(-ish) features and there is no other choice but to work around them.
Here's the minimal reproducible example, which replicates your issue in Chrome, but not in Safari nor Firefox (macOS).
.main {
scroll-snap-type: y proximity;
height: 100vh;
overflow-y: scroll;
background: green;
}
.spacer {
height: 200%;
}
input {
width: 25%;
scroll-snap-align: start;
}
input:focus {
width: 50%;
}
<div class="main">
<input type="text" />
<div class="spacer"></div>
</div>
If you want to be a good citizen of the web, your next step would be to check on the chromium bug tracker whether that bug has been reported already or not, and if needed file an issue yourself https://bugs.chromium.org/p/chromium/issues/list
As for your practical case of what to do to avoid it? As long as it is not fixed you'll need to find a workaround. This could include (not tested but likely to work):
only enabling scroll snapping under certain conditions (pretty standard workaround for other scroll-snap related issues chrome has had for the past few years)
force the scroll position on input blur
don't resize the input
add a snap target below the input
change your design / functional requirements
I'm trying to use scroll snapping via the CSS scroll-snap-type and scroll-snap-align properties, but no matter what I do I end up making non-snapping elements unreachable.
In the example below, for example. the paragraphs (<p>) are all reachable and even snapping just fine, but the header (<h1>) becomes unreachable because when I try to scroll up to view it, I just get snapped back down to the first paragraph beneath it.
html {
scroll-snap-type: y mandatory;
height: 100vh;
overflow: scroll;
}
p {
background: pink;
padding: 3rem 4rem;
scroll-snap-align: start;
}
<h1>THIS IS UNREACHABLE</h1>
<p>1.1</p>
<p>1.2</p>
<p>1.3</p>
<p>1.4</p>
<p>1.5</p>
<p>1.6</p>
<p>2.1</p>
<p>2.2</p>
<p>2.3</p>
<p>2.4</p>
<p>2.5</p>
<p>2.6</p>
<p>3.1</p>
<p>3.2</p>
<p>3.3</p>
<p>3.4</p>
<p>3.5</p>
<p>3.6</p>
My question: Is there a way to achieve CSS scroll snapping without making non-snapping elements unreachable?
further notes:
You'll probably notice that I'm using scroll-snap-type on the <html> tag rather than using a container, which is apparently more typical. That's because using a container makes things even worse, introducing multiple scrollbars and confusion over whether the container or the <body> is being scrolled. Also, for the scroll-snapping design I'm trying to achieve to function, I would need to force the container itself to snap to the top of the viewport, which just brings us back to using <body>, or, since that simply doesn't work (don't know why), <html>.
It's not really possible. Because the scroll snapping API wasn't meant to be used with mixed non-snapping elements. I ran into the same issue myself, hence why I ended up on your entry. One thing that helps a little is to use proximity instead of mandatory on the html element.
Obviously that yields a different scroll feel that you might be going for. And it has its own shares of issues; such as when you refresh the page it might still scroll down to the first <p> element because it happens to be close enough for the proximity value to trigger. To kind of avoid this you can unset snapping on the first and last child with pseudo selectors.
In the demo below it looks like it might work, but this is where things go from bad to really bad. Let's say you want to have some content below the <p>'s that also doesn't snap. If you resize the window, while at the very bottom you'll notice that the window jumps back up to the last registered snap point. Same thing will happen to any layout shifts such as opening and closing an accordion, or browsing on a mobile device with a shifting url bar. Not ideal.
So in terms of viability; mixing snap enabled together with non-snapping elements is a rabbit hole of despair, dont do it.
html {
scroll-snap-type: y proximity;
height: 100vh;
overflow: scroll;
}
p:first-of-type {
scroll-snap-align: unset;
}
p {
background: pink;
padding: 3rem 4rem;
scroll-snap-align: start;
}
h2 { height: 150vh; }
<h1>THIS IS UNREACHABLE</h1>
<p>1.1</p>
<p>1.2</p>
<p>1.3</p>
<p>1.4</p>
<p>1.5</p>
<p>1.6</p>
<p>2.1</p>
<p>2.2</p>
<p>2.3</p>
<p>2.4</p>
<p>2.5</p>
<p>2.6</p>
<p>3.1</p>
<p>3.2</p>
<p>3.3</p>
<p>3.4</p>
<p>3.5</p>
<p>3.6</p>
<h2>content below</h2>
I've made my own static website from scratch using html5 and css(3) only.But I have got 2 issues.
The first one is the white space between the top's menu and header's image bottom.I've tried everything.
Maybe the only solution for that is float:left; but then the image goes into the navigation tag or negative value on margin's property but I've heard that this technique is bad.
The second issue I'll display via image http://www.filedropper.com/discoversite that's my simple WebSite. I know my css is awful but I'm still a beginner. The second issue is here. http://postimg.org/image/5adp6379d/ . As you can see the text is going out of the box. (I am using % in css for more responsive). I will be glad if anyone can help me.
I can only have a guess for your first issue as I don't know the exact code for your website (create jsfiddle :D ). Try to apply vertical-align: bottom; or display: block; to your header image. Why? Because images are placed like text and some letters like g, j, q and p are going underneath the bottom level. Your browser will leave a tiny space for these letters. Also setting a min-width is a good solution like Kirk Logan said.
And for your second problem there are multiple solutions (depending on what you want):
You can handle your content with overflow: hidden; or overflow: scroll as Kirk Logan suggested. But this wouldn't make any sense in the case you have shown us in the picture.
Or (is a little more complex) you could remove the white borders on the left and right side (just when the screen is too small) in order to gain more space for the text. This can be done by:
#media only screen and (max-width: 768px) {
#BigBorder1 { border-width: 0px; }
#BigBorder2 { border-width: 0px; }
}
Everthing inside the outer brackets will only be applied when the screen's width is smaller than 768px. But to be honest this is usually done the other way round: When the screen is bigger than 768px then something happens. This simplification is only in order to make it easier for you.
I can't believe I can't find this ANYWHERE, but I'm just wondering if anyone knew how to inversely repeat an image in blogger. For example, I'm using this CSS coding for a background image
body { background: url(http://3.bp.blogspot.com/-yqiPjoMManc/UprceV8zY7I/AAAAAAAADZw/GP119GZKgzM/s1600/new+background.png) repeat fixed top center; background-color: none; }
.body-fauxcolumn-outer div { background: none !important; }
anyway, it looks super weird on screens of bigger computers, as you can see here: http://prntscr.com/292k6l
as when you repeat the image, the sides don't match up at all. Does anyone know how to continously flip around an image in blogger when repeated? Thanks!
Try cut pattern separately from the gradient and put them on different layers. If you give PSD i can help you. Gradient will stretch across the width of the page, the picture is repeated over the gradient.
I haven't asked too many CSS questions on here, so here it goes.
Let's say I have a page:
<body>
<div id="wrap">//page containment, etc.. goes here..</div>
<img class="custom-bg" src="example.jpg" />
</body>
Then I write some CSS for the image in particular:
#wrap {
z-index: 100;
}
img.custom-bg {
position: absolute;
top: 1000px;
left: 50%;
margin-left: -960px //the image is 1290px wide
z-index: 0;
}
If you can't tell by now, yes, I'm trying to create a background image using absolute positioning. Yes, I know, I can just set the image as a background to the body tag and use positioning to place it, but for the sake of this question, let's say that's not an option to me.
The issue at hand is the appearance of horizontal scroll bars. Google is full of examples with people turning off overflow and other things, but I'm curious if anyone has been able to find/create a definite approach to removing horizontal scroll bars when performing something like the above. An absolute image, that lives happily on it's own. Centered. And not "attached" to the window... Thus eliminating the need for the browser to let users know there's an image that's really big, and that they just have to see it by scrolling horizontally a little bit.
Any insight would be awesome. I included as little code as possible so that people who may search for this example and are new to web dev, may have an easy time understanding how to work through their problem regarding absolute positioning and horizontal scrolling.
I may have missed the point here, but why don't you just use position:fixed instead?
http://jsfiddle.net/shanethehat/7MetS/