![]() * px)`Īds injected on page load can cause overflow if they’re wider than their parent. var docWidth = Īpplying CSS’ outline to all elements on the page gives us a hint about elements that go beyond the page’s body. This is handy for pages with a lot of elements. We can add a snippet to the browser console to show any elements wider than the body. ( Large preview) Using JavaScript to Find Elements Wider Than the Body Whenever you can scroll, there is an overflow in play. If you’re able to scroll, this is a warning that something is wrong with the page. The first way to discover an overflow issue is by scrolling the page horizontally. Let’s explore the ways to detect overflow. There are different ways to detect overflow, from manually scrolling to the left or right or by using JavaScript. If we know when and where it happens, we can home in on that part of a web page. We will explore all of the causes in this article.Īn important part of solving this issue is noticing it in the first place. It could occur because of unexpectedly wide content or a fixed-width element that is wider than the viewport. Overflow with a fixed-width element that is wider than the viewport. An overflow issue occurs when a horizontal scrollbar unintentionally appears on a web page, allowing the user to scroll horizontally. What Is an Overflow Issue?īefore discussing overflow issues, we should ascertain what one is. Some issues can be fixed quickly, and some need a little debugging skill. Because there are many causes of scrollbar problems, there is no straightforward solution. If you’re a front-end developer, you may have come across horizontal scrollbar issues, especially on mobile. We will also explore how modern features in the developer tools (DevTools) can make the process of fixing and debugging easier. In this article, we will explore the causes of overflow issues and how to solve them. What does this means? It means that now we will be able to gather information through JavaScript about the scrolling event, which is exactly what we need. Now we will subscribe to the mousewheel event by attaching an event listener to our scrollable element, which in this case is the element with the tag main. main Using the mouse wheel or trackpad to scroll horizontally If you decide not to hide it, make sure to change it for overflow-x: scroll. There’s no need for this but we’ll be doing it for our demo. ![]() ![]() We will also be hiding the scrollbar for this demo by using overflow-x: hidden. We use display:flex making the main element the flex container. Then we can center the content using justify-content and align-items. To do this, we will use viewport units like vh and vw to set the min-width and min-height properties to scale to both the edges of the screen. You can have as many sections as you want.įor the purpose of this demo we will make the elements full-screen. We are trying to create something like this, where elements are overflowing the container and therefore we can create a horizontal scrollbar for them. We will place each section aligned next to each other so the content overflows horizontally. As it is right now, there isn't enough content to produce an overflow. It is a going to be the element that a scrollbar is bound to as long as there is content that overflow it. The main element will be the scroll container. To start, we will write some HTML to set in place some content that requires some horizontal scroll. Isn’t that cool? In this article we will take a look at how you could use vanilla Javascript to create such an interesting effect. ![]() ![]() Imagine scrolling down with the mouse-wheel or trackpad and that your page scrolls horizontally instead. ![]()
0 Comments
Leave a Reply. |