1/13/2024 0 Comments React control overflow scrollingWe’ve added a useLayoutEffect to our Hook that will set the CSS custom property on the body element, and seeing as though we now have that compensation value available, we’re making use of it when adding padding to the body, rather than calculating it again. We’ll start by creating a Hook, importing it into our component, and then setting up the scroll lock implementation.įirst, the structure of our Hook: import React from 'react' Ĭonst lockScroll = eCallback(() => px`) Lets update our application to account for users scrolling when we wouldn’t expect them to scroll. Oftentimes the mobile menu will sit completely over the top of the content, or take up 90 percent of the viewport.Īs we demonstrated above, the browser will still allow a page underneath an element to scroll, which means it’s very easy for a user to open the menu, accidentally scroll the background page, close the menu without making any selections, and be shown completely different content. It’s not until scrolling pauses for a second, that the browser will allow the cursor to scroll the content in the modal.Ī scrolling background is also a nuisance when dealing with a mobile menu. ![]() When we get to the bottom of that content, the background page then starts to scroll.Īttempting to scroll back up only scrolls the background page up, not the content that the mouse is hovering over. In the capture above, we can see that the modal gets opened, and the scrollable content within that modal is scrolled. What happens if the quick view container has some long content itself, and has its own scrollbar?: When the modal opens, the user places their cursor over the modal content and scrolls their mouse wheel the background page moves! This can be very disorienting to a user as it’s not what they would expect to happen. In the image above, we can see a user opening a quick view modal. The best way to get an appreciation for scroll lock is to demonstrate the experience that a user will get when scroll lock isn’t considered: As we go through demonstrations of web pages that don’t have scroll lock, it will become clear when and why we would want to prevent a user from scrolling our pages. In this article, we’ll explore scroll lock, and attempt to create a cross-device React Hook that will handle layout shift caused by applying it. This sounds counterintuitive why would we ever want to prevent a user from scrolling our web page to see content!? Import from 'react-native' Ĭonst screenWidth = Dimensions.get('window').width Ĭonst screenHeight = Dimensions.get('window').Scroll lock is a technique used on websites when we don’t want a user to scroll the page. Even with a fixed height around your containers, the content might overflow on devices with small screens. As a result, when you render content that goes out of the bounds of a user’s screen, will clip off all the overflowing content. However, it doesn’t account for overflow. ![]() You can use it to build complex UIs by nesting native as well as custom components like, ,, etc. The most generic container used in React Native is the component. ![]() You’ll understand what they are, write them in code, and explore some best practices with practical examples. ![]() This post presents a deep and comprehensive guide on React Native’s scrolling containers, which are called ScrollViews. Luckily, scrolling containers provide a reliable solution to this problem. Moreover, not being able to scroll through your app’s screen could be confusing for your users. When mobile apps abruptly clip off content from the screen, it’s a sign of bad UX for developers.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |