Taro
KPCKevin Powell - Community
•Created by Taro on 2/10/2024 in #front-end
Parallax scroll causes a white rectangle to appear in a weird position
In the Codepen below I was trying to recreate a no-js parallax effect, the parallax works, but two things I didn't understand how they were happening, The first one is once you start scrolling a white rectangle appears, I don't know what it is and couldn't find its element on the DOM, the second there is a white space that appears at the end of the page and I have no idea why?
Does anyone have an explanation for this?
https://codepen.io/taro-naza/pen/oNVPmjZ
2 replies
KPCKevin Powell - Community
•Created by Taro on 4/28/2023 in #front-end
Overflow-x: hidden causes vertical scrolling
Hey!
I'm working on a website, and I have two problems I'm trying to figure out:
1- I have a hero section where I position some decorative SVGs using position absolute, and I need them to overflow over the viewport, so I use overflow-x: hidden on the parent I end up with vertical scrolling on only the section, Why is this behavior happening? 2- the div .separator class has width: 100% and I applied a margin on it (all four sides) but it does not get applied on the right, why is that? Here is the web page: https://644bfc6b0eba930d586dd80f--stirring-pastelito-35a5e1.netlify.app/ Thanks a lot P.S: if I move the dive with .separator class inside the div with .hero class the vertical scrolling dissapears
1- I have a hero section where I position some decorative SVGs using position absolute, and I need them to overflow over the viewport, so I use overflow-x: hidden on the parent I end up with vertical scrolling on only the section, Why is this behavior happening? 2- the div .separator class has width: 100% and I applied a margin on it (all four sides) but it does not get applied on the right, why is that? Here is the web page: https://644bfc6b0eba930d586dd80f--stirring-pastelito-35a5e1.netlify.app/ Thanks a lot P.S: if I move the dive with .separator class inside the div with .hero class the vertical scrolling dissapears
7 replies
KPCKevin Powell - Community
•Created by Taro on 4/19/2023 in #front-end
overflow-x on the body element does not work
Hey!
I have been working on this project:
https://64401877a3e55700863fec85--super-daffodil-7196e0.netlify.app/
(You should view it in responsive mode at 375px preferably to see the issue)
I started to work on the mobile view first, where I have a hero section that has two decorative svgs that are positioned absolute where their parent has a position relative, and when I finished I noticed that I have horizontal scrolling, I have tried to set the body width to 100% and set overflow-x: hidden on the body but the horizontal scrolling was still there, the only solutions I found is to set both body and HTML property of overflow to hidden, or wrap everything inside the body in a div and give it overflow: hidden.
My question is why this behavior occurs because I have always thought that if I set overflow-x: hidden on the body or the HTML element with hide any overflowing content
Thanks for the help 🙂
4 replies