overflow hidden on body
Hey, I see mixed opinions on things like adding
overflow: hidden on the body to prevent scroll bars due to decorative elements as shown in this image for example (the blue blob). Is this is a method to use or is it recommended to use something else? Thanks in advance!
18 Replies
Well, as you said, there are mixed opinions π
I say that you should avoid doing it if you can. For example by using a display: absolute (I think that should fix it) on the element that causing the overflowing. But if it doesn't work, and this solution doesn't really cause any breakage elsewhere then go for it.
I attempted this design, itβs one from fem, and I used
position: absolute; for it and it still causes scroll bars, so in that case what would you recommend?Without looking at the actual code, I can only recommend doing the overflow hidden
Btw, Discord itself uses it on the website so that should tell you that even on large projects it's a viable solution.
But if for whatever reason that is just not an option, you can adjust your design. For example, use an image that cuts off exactly as the screen would and place it at the edge of the viewport. It would produce the same visual effect.
Ah alrighty, thank you
Do you know for a fact which element is causing this problem? I'm pretty sure that positioning something as absolute should fix it π€
if it's a simple blob like on the image you can avoid using overflow hidden https://www.youtube.com/watch?v=Ivk8Blw2VTI
Kevin Powell
YouTube
How to escape the container on only one side
π If youβve been writing CSS for awhile now but youβre having trouble making that next step up with is, you might be interested in my course CSS Demystified: https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=full-width-one-side
Having something be full-width on a website isn't hard, and there are even some neat t...
Iβm on phone rn but when Iβm on the pc Iβll send the code here
It's only bad if you use it to fix overflows that you don't understand. It's a beginner's solution to get around what they don't know. If you understand why its overflowing and the overflow isn't coming from a hidden mistake or something you don't understand, then it's OK.
Also, there are some techniques that involve intentionally creating overflows and hiding them. A common example of that is a carousel. An inner container holds all the items in the carousel and an outer container has a hidden overflow to show only the currently active item. This allows a sliding animation when the next item comes into view.
@joao6246 here's the code https://codepen.io/deerCabin/pen/VwqzjGK.
overflow: hidden; on the body is commented out. The absolute element causes scrollbars as you can see. You'd want to be looking at the mobile view btw, i haven't added the responsive part for desktop yet.
ah i see i see, thank you for the explanation.Mm I see
Yeah I also don't like this types of overflows π
One quick fix you can try is on the ::after element (which is causing the overflow) give it a
left: 0 and then use the --gutter variable you're already using to determine the spacing between the content and the borders. If you give it some margin that should make it fit exactly without causing issues.
Ah yeah Iβm pretty sure I did the blob classes before making my variables haha, so give it a negative margin left rather than simply just left?
It's specific to the design but in this case you can just play around with the widht and left as percentages, but adding that additional margin on the left, to push it towards the right edge. You could also do negative margin on the right but I avoid doing that when possible.
So, for example in this particular case it's just a bit of math: the total amount in percentage between wdith and left should be 100% so if you do
width: 85% you should do left: 15%. This would make sure that the blob starts just under a fifth of the edge of the image, similar to how it looks in your original screenshot. You will notice that it stops right at the edge of the design because of the gutter. If you add that, you can control exactly when the blob ends, which in this case should pretty much always be the edge of the screen, regardless of media queries (unless the gutter value changes)
ohh that's pretty neat, i'll definitely do that! could i merge the left and margin left values with a calc? like-
left: calc(15% + var(--gutter-200-em));Try π
i did and it works well, is it right to do so is what i probably should have asked haha
I think, given it's on a non-essential, mainly decorative element, it's perfectly fine. Using percentages in general is typically a trial and error game no matter what, so it's normal to see weird magic numbers and tricks like these. Maybe add a comment to explain what's going on just for your future self.
ah i see, sounds good, will do, i appreciate your help!