This tutorial aims to solve the page width problem and mobile horizontal scroll bar phenomenon caused by asynchronous loading of dynamic content such as sidebars in React applications. We will delve into how to build a robust responsive layout through CSS media queries, mobile-first strategies, and layout frameworks, and provide best practices for avoiding layout jitter to ensure users have a smooth browsing experience on different devices.

In modern web development, especially when using componentized frameworks like React, dynamic loading of content (such as sidebars, ads, or data-driven components) is a common pattern. However, this asynchronous loading mechanism can sometimes lead to unexpected layout issues, especially when content appears after the initial rendering of the page. A typical scenario is that the page calculates and sets the width based on the main content area (such as React's ), and then an asynchronously loaded sidebar suddenly appears, causing the overall width to exceed the viewport, which is especially prone to annoying horizontal scroll bars on mobile devices. This article will provide a comprehensive solution to help developers build robust and responsive layouts to effectively avoid such problems.

Core Solution: Responsive Design and CSS Media Queries

The fundamental solution to layout problems caused by dynamic content loading is to adopt responsive design principles and use CSS media queries (Media Queries) to define specific layout rules for different screen sizes.

1. Mobile-First principle

Mobile-first is a powerful design strategy that requires us to first design and write CSS styles for the smallest screens (such as mobile phones), and then gradually expand upwards, using media queries to add or override styles for larger screens such as tablets and desktops. This approach has the following advantages:

• Performance optimization: Mobile devices are often performance-limited, and mobile-first means that the CSS loaded by default is leaner.
• Better user experience: Force developers to think about core content and functionality to ensure a good experience on the smallest screen.
• More natural layout expansion: Adjusting a layout from a small screen to a large screen is often easier to manage than shrinking from a large screen.

2. Apply CSS media queries

Through media queries, we can apply different CSS rules based on the characteristics of the device (such as screen width). Here is a SASS/SCSS style example showing how to adjust the layout for different screen sizes:

 /* Default style: for small screens (mobile devices) */
.app-layout {
    display: flex;
    flex-direction: column; // Mobile sidebar and main content stack vertically width: 100%;
    overflow-x: hidden; //Hide the horizontal scroll bar by default to avoid accidental appearance}

.sidebar {
    width: 100%; // The mobile sidebar occupies the full width/* Other mobile sidebar styles*/
}

.main-content {
    flex-grow: 1; // The main content occupies the remaining space width: 100%; // The main content on the mobile terminal occupies the full width /* Other main content styles on the mobile terminal */
}

/* Media query: when the screen width is greater than or equal to 768px (for example, tablet or desktop) */
@media only screen and (min-width: 768px) {
    .app-layout {
        flex-direction: row; // Desktop sidebar and main content are arranged horizontally}

    .sidebar {
        width: 250px; // Fixed width of the desktop sidebar flex-shrink: 0; // Prevent the sidebar from being compressed}

    .main-content {
        flex-grow: 1; //The main content occupies the remaining space/* Ensure that the main content will not be squeezed due to the appearance of the sidebar*/
    }
}

In the above example:

• We first defined .app-layout to use flex-direction: column on mobile devices, that is, the sidebar and main content are vertically stacked.
• When the screen width reaches 768px, the flex-direction is changed to row through media query, so that the sidebar and main content are arranged horizontally.
• Set an explicit width for the sidebar (such as 250px) and use flex-shrink: 0 to prevent it from shrinking when there is insufficient space.

Avoid layout jitter caused by asynchronous loading (Layout Shift)

Even with responsive design, asynchronously loaded content can still cause page content to "jump" after it has finished loading. To avoid this layout thrashing, we can adopt the following strategies:

1. Reserve space or placeholder

If you know the expected size of an asynchronously loaded component (such as a sidebar), you can reserve space for it before it finishes loading.

• Fixed size components: If the sidebar has a fixed width, you can set min-width or width on its container.

   .sidebar-container {
      min-width: 250px; /* Reserve the width of the sidebar*/
      height: 100vh; /* reserved height*/
      background-color: #f0f0f0; /* Optional: display a placeholder background*/
      /* ...other styles*/
  }

• Skeleton Screens: Display a placeholder that simulates the structure of the content instead of empty space when the content is loading. This lets users know content is coming and prevents sudden layout changes.

2. Use CSS overflow-x: hidden

Setting overflow-x: hidden on the root container (such as the body or the outermost layout container) can prevent horizontal scroll bars from appearing on the page. But this is only a temporary solution, as the content may still be outside the viewport and just be hidden. Best practice is to fix the layout itself rather than just hiding the scrollbars.

3. Optimize the loading process

If possible, optimize the loading process of the sidebar so that it loads as quickly as possible or at the same time as the main content. For example, forward sidebar data requests, or use server-side rendering (SSR) to pre-render part of the content.

Layout framework assistance

Using a layout framework like flexboxgrid, Bootstrap, Tailwind CSS or Ant Design can greatly simplify the implementation of responsive layout. These frameworks usually provide a set of predefined grid systems, responsive tool classes, and components to help developers quickly build consistent and adaptable interfaces.

For example, flexboxgrid provides a 12-column grid system based on Flexbox. The column widths under different screen sizes can be easily defined through class names such as col-xs-12, col-md-4, etc.

Things to note and best practices

1. viewport Meta tag: Ensure that the HTML header contains the correct viewport meta tag, which is the cornerstone of responsive design. It tells the browser how to control the scaling and dimensions of the page.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   • width=device-width: Sets the viewport width to the actual width of the device screen.
   • initial-scale=1.0: Set the initial scaling ratio of the page to 1:1, that is, no scaling.

2. Browser developer tools: Take full advantage of the browser's developer tools for responsive testing. Most browsers offer device emulation mode, which makes it easy to see how a page will behave in different device sizes and orientations.

3. Performance considerations: Frequent layout jitter not only affects user experience, but may also have a negative impact on the core web metrics of the page (such as cumulative layout offset LCP). Unnecessary layout redraws and reflows should be minimized.

Summarize

Solving the page width and horizontal scroll bar issues caused by dynamic content loading in React applications requires a multi-faceted strategy. The core lies in adopting mobile-first responsive design and proficiently using CSS media queries to define layout rules for different screen sizes. At the same time, through technologies such as reserved space and skeleton screens , layout jitter caused by asynchronous content loading can be effectively avoided. Combined with the help of the right viewport meta tags and layout frameworks , developers can build beautiful and powerful web applications, ensuring a smooth and consistent user experience on any device.

The above is the detailed content of Responsive layout under dynamic content loading: avoiding page width issues and horizontal scroll bars. For more information, please follow other related articles on the PHP Chinese website!