We are able to see the text overflow into another area because the default value here is visible even though we did not specify that. In a real life project, this would be even more annoying because you'd have this text overlapping other elements on the page. The text can't fit into the white container so it overflows and crosses the container's border. Now have a look at what's happening with the container and the text: Mobile viewport with an overflow caused by an ad that is wider than the viewport. Add overflow-x: hidden to the parent element to prevent this. (Large preview) The reason for this is that with the value 100vw, there is no awareness of the width of the browser’s vertical scrollbar. You could be working on a project and then realize that a piece of text crosses the border. On Windows, there is a horizontal overflow when scrolling. The text sits comfortably in the white container without crossing the container's border on both axis. Then we made our paragraph's text color green. We set the background color of our div element which acts as a container to be white. For example, overflow: scroll hidden would set overflow-x to scroll and overflow. Otherwise, both overflow-x and overflow-y are set to the same value. If two keywords are specified, the first applies to overflow-x and the second applies to overflow-y. We've given our page a background color of black. Note: You can specify x- and y-axis scrolling using the overflow property, passing two values. Repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam estĪccusantium quis quos minus veniam eaque? Modi expedita mollitia et qui! Lorem ipsum dolor sit amet consectetur adipisicing elit. With this property, we can see our content clearly when it overflows into another area. This is the default value that the overflow property takes if none is specified. We will go over the following values of the overflow property and see how they work: When this happens, it makes the content "overflow" into another area, either horizontally (X-axis) or vertically (Y-axis). It helps us control what happens when an element's content is too big to fit into an area. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.In this tutorial, we will talk about an important CSS property – the overflow property. If you're using something like React/ Next/ Nuxt/ Gatsby or some other framework, you may find CodeSandbox easier to use. See the Pen aYYOdN by GreenSock ( on CodePen Just click "fork" at the bottom right and make your minimal demo: Here's a starter CodePen that loads all the plugins. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. If not, incrementally add code bit by bit until it breaks. See if you can recreate the issue with as few dependancies as possible. Please don't include your whole project. Just some colored elements and the GSAP code is best (avoid frameworks if possible). Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? It should be possible to scroll on the x-axis. The children are floating left and would be in the overflow. I want to put many children-divs in a parent-div. It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Scrolling on x-axis in a div with overflow.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |