A brief discussion on internal scrolling layout

A brief discussion on internal scrolling layout

1. What is inner scrolling layout?

The so-called "inner scroll layout", as the name implies, is the layout of the main scroll bar inside the page, which is relative to the traditional <html> scrolling. For example, the scroll bar shown in the figure below starts from the bottom of the header:

Traditional page scrolling is basically relative to the entire browser window, for example, the QQ video homepage:

2. Why is there an internal scrolling layout?

With the increasing size, width and density of display devices, as well as the development of modern web technologies, web sites have begun to shift from traditional waterfall-style web pages to desktop software-style sites. For example, the homepage of QQ Music currently looks like this:

It may become like this in the future:

"What? Isn't this a screenshot of the current QQ Music software interface?" "This classmate has sharp eyes. Yes, this is a screenshot of the PC version of QQ Music, which has the largest genuine high-quality music library in the country."

We can zoom in locally and find that it is a real internal scrolling layout.

Not only QQ Music, many other desktop software have this kind of internal scrolling layout, such as QQ Software Manager and so on.

It can be seen that once the highly interactive traditional web pages are desktop software-based, the internal scrolling layout is an unavoidable wall, and it is still necessary to understand it.

3. How to implement internal scrolling layout?

Since it is an internal scroll, it is necessary to get rid of the browser's native <html> scroll bar, which is very simple:

  1.  html { overflow: hidden; }

"And then?" I thought about it, and it seemed like there was no "and then", just let a div container scroll and that was it.

However, you don’t know how difficult something is until you experience it. Although the principle is simple and easy to explain, the detailed operations still require some learning curve.

To better understand, let's take an example. In the past six months, I have been involved in the project of redesigning the enterprise QQ account center, which you can think of as an enterprise backend management system. There are several keywords here, one is enterprise, and the other is management system.

#p#

1. Enterprise

Why do we emphasize "enterprise" here? Because the users of enterprise products are generally employees of the companies that purchased the enterprise QQ products, people with certain IT skills. Therefore, the modernity of the users' browsers is much stronger than that of Qzone users. The following figure shows the userAgent data pulled by a colleague on 2015-05-20, a day full of love:

If we call the browsers that support CSS3 animation modern browsers, we can find that 70% to 80% of enterprise product users use modern browsers. Dear friends, nearly 80% of users use modern browsers, which means that enterprise products can actually be used as a test field for modern web technologies. While providing users with better experience and higher quality products, it also provides valuable reference experience for the modernization of other products in the future. The internal scrolling layout in this article is just a small example of thousands of experiences.

2. Management System

"Management system" means that the site is mainly interactive, and there will be many interactive operations similar to office software. If it is a site that focuses more on browsing, such as the official website of Enterprise QQ, obviously, the traditional vertical waterfall website is more suitable, scrolling, scrolling, and browsing again. However, the enterprise management system is so large, the operations are so frequent, and the interactions are so many, the traditional top-down website is obviously difficult for users to use very easily. The following figure shows the true appearance of the previous Enterprise QQ Account Center Organizational Structure Page (test page):

Looking at this page, I immediately remembered the green years when I just graduated 6 years ago. The page at that time was basically in this tone, with a small world in a small space. With the development of the times, no matter how glorious the past is, if it does not change, it will eventually be buried.

It is precisely because of the above two points that the designer was bold and innovative when designing the management site, which is full-screen adaptive, semi-responsive, and PC software style (internal scrolling). The following figure is a screenshot of the new test page with the same data as the old page above:

Back to the inner scroll layout itself.

The new version of the enterprise account center has the top and left sides fixed and do not scroll, while the right side scrolls within the main body. How can this be achieved?

Since enterprise products don't need to care about 0.4% of IE6 users, the event becomes much simpler. We can use the stretching characteristics of absolutely positioned elements to make the inner scroll container highly adaptive. The main HTML structure is as follows:

  1.  body
  2.  --page
  3.  --header
  4.  -- side
  5.  --content

The page plays the role of the traditional page <body>. This is a reserved design to prevent the situation where multiple similar structured pages appear on one page at the same time to meet certain functions or interactive experience needs. Or let’s put it this way, put all the page content in one page, and the page is like a movable house. When you switch to Tencent, you can bring the house with you, and the original position can be replaced by other houses. However, if you put it directly in the <body>, since the <body> can only be one, immovable property, it will be difficult to do an overall migration at this time. At the same time, the project is almost complete, and the cost of global modification is high and the risk is high. However, everything has two sides. Such tossing can reduce the number of your gray hair, because your hair will fall out directly due to overwork.

The page-related CSS is as follows:

  1.  .page { position: absolute; top: 0 ; right: 0 ; bottom: 0 ; left: 0 ; }

It should be easy to understand that absolute positioning and full-screen stretching are equivalent to:

  1.  .page { position: absolute; top: 0 ; left: 0 ; width: 100 %; height: 100 %; }

Since it saves several bytes, I abandoned IE6 and used the above method.

For a fixed header or side, you can use the semantically clear position:fixed positioning, or directly use position:absolute. Because the scroll container is at the same level as them, absolute is actually the fixed effect.

At this point, I have to say something off topic. Many people will encounter the headache of positioning the bottom input box of position:fixed on mobile terminals. How to solve it? Just use the inner scrolling layout introduced in this article, and then use position:absolute at the bottom to simulate the fixed effect. [[143267]]

In terms of code, it is also stretching:

  1.  .header { height: 62px; position: absolute; top: 0 ; right: 0 ; left: 0 ; }
  2.  .side { width: 200px; position: absolute; top: 62px; bottom: 0 ; left: 0 ; }

Finally, the high-energy content, still the same routine:

  1.  .content { position: absolute; top: 62px; right: 0 ; bottom: 0 ; left: 200px; overflow: auto; }

All the main content is played in content. Thus, an inner scrolling layout of a browser window with both height and width adaptive is formed.

4. Rewards and penalties for internal scrolling layout

If we look at the inner scroll layout from a bird's eye view, it is essentially the migration of the scroll container and the distribution of functions. So in most cases, it is no different from the way we usually play with pages.

However, after all, the differences still exist. The simplest example is the impact on scroll events. Many scroll plug-ins, including previous scripts, may be written like this:

  1.  $(window).scroll(function() {
  2.  // Come roll with me, young man...  
  3.  });

However, in the inner scrolling layout, since the scrolling container is not a window form, nor an <html> element, the above scrolling event will never be executed. We need to adjust it. Since the main scroll bar of the page is .content, we can:

  1.  $( ".content" ).scroll(function() {
  2.  // Roll with me, young man again…  
  3.  });

#p#

Do you think that's the end of it? Too naive! In the past, our scroll bar was close to the top edge of the browser, but since it has become inward scrolling, the scroll bar is aligned with the bottom edge of the website's common header. What problems will this cause? Some offset calculations will have to change. For example, we hope that the table header operation area has a similar position:sticky effect, that is, it scrolls together within the viewport, and when it is about to be rolled out, it is fixed and does not follow.

At this point, our maximum scroll height value needs to take into account the height of the website header (traditional form scrolling does not require this because the value is 0):

  1.  var maxScrollTop = $( "#tableHeader" ).offset().top - $( ".header" ).height();

We can call the above a "change". Compared with the original implementation, it is neither good nor bad. In fact, the inner scrolling layout will also bring some features with qualitative changes.

Popup that cannot be scrolled

Basically, any decent web2.0 website will have a pop-up web component, a black semi-transparent overlay layer with a pop-up panel swaying on it, like this:

For the black semi-transparent overlay, the traditional implementation is as follows: if you want to be compatible with IE6 browser, absolute positioning is generally used, and the height is calculated by JS; if you don't need to care about IE6, you can use fixed positioning.

However, in the inner scrolling layout, the "reward" comes out. Even if it needs to be compatible with IE6 browser, the black semi-transparent 100% height and width adaptive coverage does not require any JS calculation help, nor does it need to listen to the window resize event. It can be done directly with CSS. It's very simple:

  1.  .overlay { position: absolute; left: 0 ; top: 0 ; width: 100 %; height: 100 %; }

Why can one line of CSS handle all scenarios? Because we use an inner scrolling layout, as shown in the following figure, the screen is this high, and the scrolling is naturally adaptive:

It seems like a small "reward" brought by the inner scrolling layout, but in fact, it lays a big "penalty".

The biggest problem with arbitrarily changing the scroll container is that when there is an overlay, it will affect the scrolling of the page content behind it.

An overlay with position:absolute/fixed at 100% size will cover any non-<html> elements (including <body>) (including those elements' scrollbars), so the page won't scroll as long as the overlay + scroll container changes.

The inner scrolling layout is a typical layout that changes the default scroll container of the browser. Naturally, once the overlay appears, it cannot be scrolled. But this is nothing, right? When the pop-up box appears, it is also good that the page background cannot be scrolled.

However, the trouble is, what if the pop-up box itself is very high and cannot be scrolled (the browser has a available height of 700 pixels and the pop-up box is 900 pixels high)?

In the traditional layout, if the height of the pop-up box is very high, you can directly set the pop-up box container position:absolute and it can roll up and down happily. However, in the inner scrolling layout, the pop-up box is not in the scrolling container at all, so how can it roll?

Big Crisis! What to do!?

Our new version of the enterprise account center encountered this problem, and this is how I solved it - combining overlay and dialog.

Fit and Roll

What does integration mean? Basically, in 90%+ of the pop-up window components, the semi-transparent overlay and the pop-up window dialog are two independent elements in parallel and sibling relationship. The advantage of this design is that the overlay component can be reused. In fact, to achieve a pop-up window effect, only one layer of div tag is needed. The core is to use the compatible RGBA background color technique, and then put the pop-up window HTML inside:

  1.  .container {
  2.     position: absolute; top: 0 ; left: 0 ; bottom: 0 ; width: 100 %;
  3.     background-color: rgba( 0 , 0 , 0 ,. 5 );
  4.     filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
  5.  overflow:auto;
  6.  }
  7.  :root .container {
  8.  /* IE9 has no filter */  
  9.  filter: none;
  10.  }

The HTML structure is as follows:

  1.  <div class = "container" >
  2.  <dialog></dialog>
  3.  </div>

At this point, the pop-up window is in a scrollable container, so my mom doesn’t have to worry about me not being able to roll happily anymore!

V. Conclusion

Since traditional form scrolling has been deeply rooted in people's minds, we may feel that the inner scrolling layout seems to have some pitfalls; however, if the inner scrolling layout was the world in the past, how should we view the emerging form scrolling layout? Then, from the product perspective, the improvement in the interactive experience brought by the inner scrolling layout in such a frequent and interactive project is much greater than the additional development cost caused by lack of experience.

I believe that this form of interaction and innovation in web layout will bring a lot of positive feedback and positive impact. The product will be launched soon, so we can wait and see.

The inner scrolling layout is more modern and mobile. If your project is suitable, you might as well try this seemingly novel layout method.

Thank you for reading, welcome to communicate!

Source: Tencent ISUX ( http://isux.tencent.com/inner-scroll-layout.html )

<<:  Add animation to the tab bar

>>:  Making software for Mac? What is Hammer trying to do?

Recommend

The complete collection of The Legend of the Dragon Slayer comics is free: How to make the website HTML code more in line with the SEO structure?

The web pages that ordinary people see are organi...

Apple lost as much as Baidu in 5 days, Cook should wake up

In China, Apple rarely invites celebrities to adv...

How can community operations improve community activity?

If you are engaged in community operation , you m...

Technical dry goods: Statistics on the use of pictures in the project

[[155011]] As project development progresses and ...

Detailed explanation of Android Bitmap cache pool usage

This article introduces how to use cache to impro...

iOS 15 details revealed: Lock screen UI gets a new look, health features

Apple has announced that the WWDC 2021 Developer ...

Zhihu traffic growth rules!

In the past November, Zhihu released its Q3 2021 ...

Sleep mini program function, how much does it cost to develop a sleep monitoring mini program?

Nowadays, due to increasing stress on people, the ...

Sales Big Player-Management Routine You Don't Know Baidu Cloud Download

Sales Big Players-Management Routines You Don’t K...

How to make your APP stand out from competitors and attract more users?

With the rapid development of mobile Internet , a...

Leling SEO training: Home page optimization is very important for SEO

The homepage of a website is extremely important ...

Tik Tok operation strategy for K12 education industry!

As the proportion of short videos in the content ...

WeChat's ringtone-changing function has been criticized: it only works within the app

WeChat officially released the iOS 8.0.8 version ...

What are the media search tools commonly used by new media operation experts?

I once naively thought Search for resources onlin...

31 Lessons on Introverted Children: The Best Way to Raise Them: Dare to Express, Be Creative, and Be Confident

Do you often worry about having an introverted ch...