Detailed explanation of four solutions for implementing in-line scrolling on mobile devices

Discovering Needs

If only part of an area is allowed to scroll and the rest cannot move, what method would you use?

First, we can break this requirement down into two small problems to solve.

• Partial area fixed
  
• The rest of the area scrolls
  

Partial area fixed

1. Set height: 100% and overflow: hidden for the body of the page to disable native scrolling of the page and ensure that only one screen of content is displayed.
   
2. The fixed area uses absolute positioning.
   

The rest of the area scrolls

Core attribute overflow-y

MDN's definition of overflow-y

The overflow-y property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element when it overflows at the top and bottom edges.
The overflow-y property specifies whether to clip the content and render a scrollbar, or to display the overflowing content when a block-level element overflows at the top or bottom of the element.

Simply put, when the overflow-y property overflows in the vertical direction, different values ​​will produce different performance. In order to implement the scrolling function, we need to set this property to scroll. After that, regardless of whether the content of the block-level element overflows, the browser will generate a scroll bar and hide the overflowing part of the container, which will only be displayed after scrolling.

For example:

 .test{
  width: 200px;
  /* Key styles */
  height: 200px;
  overflow-y: scroll;
  /* The following styles are irrelevant*/
  background: #f14c5c;
  color: #fff;
}
<div class="test">
  This is just a test content. This is just a test content. This is just a test content. This is just a test content. This is just a test content. This is just a test content. This is just a test content. This is just a test content. This is just a test content. This is just a test content. This is just a test content. This is just a test content. This is just a test content.</div>

The effect diagram is as follows:

From the example just now, we can conclude that as long as the height of the block-level element is limited, it is natural to achieve that only the content of the element can be scrolled without affecting other content. However, new problems arose during the implementation process: how to achieve accurate restoration of the design drawings?

The design diagram is as follows:

The height of the entire pop-up box is adaptive to the page height. The positions of the title part and the bottom button part are fixed. The middle list needs to occupy the remaining height, and the content is scrollable. The entire popup is wrapped by the outermost div, and the bottom button is positioned relative to it. After thinking about it, I tried four solutions and shared them with you.

Solution Description

The core issue we need to determine is the height of the middle content, that is, the exact height of height under different screen sizes.

v

Relative to the viewport's height, the viewport is divided equally into 100 units, i.e. 1vh is equal to 1% of the viewport's height.

However, the vh unit does not support lower versions of Android and iOS well enough, and the WeChat browser X5 kernel does not support it. Although it has been upgraded to the blink kernel, in order to ensure that everything is foolproof, this solution is abandoned. Also, there is no way to precisely control the bottom button margins.

height percentage

Similar to vh, it is impossible to precisely control the margins of the bottom button, and the adaptive effect is not good.

calc

The calc calculation property can solve the problems of the above two solutions very well. You only need to set height:calc(100% - 60px) to accurately fill the middle part and maintain the margin with the bottom button.

Unfortunately, the support for lower versions of Android browsers, iOS browsers, and mainstream browsers including WeChat browser is poor, so they have to be abandoned.
If the compatibility is better, the calc solution should be the most useful and elegant implementation.

js

This cannot be achieved using CSS alone, so you can only use JS to dynamically calculate the height required for the content and set it. At the same time, this method will hardly encounter compatibility issues and is a practice of graceful degradation.

Off topic

Hide the ugly scrollbars.

If you set overflow-y:scroll directly, an ugly scroll bar will always appear on iOS. We can set the following properties for the element:

 margin-right: -20px;
padding-right: 20px;

With a small hack on the scrollbar, it will never appear again, and the user interaction will feel the same as native scrolling, with a better experience.

@prototype Thanks for your reminder that setting the private property of webkit browser::-webkit-scrollbar can control the scroll bar more flexibly. If you just need to hide, the following code is enough:

 ::-webkit-scrollbar{
  display: none
}

Although most mobile browsers use the WebKit kernel, we still need to test it on real devices before drawing conclusions. If some browsers do not support this property, you can still use the little hack above.

-webkit-overflow-scrolling: touch

In iOS devices, using overflow to simulate scrolling may cause lag. This can be solved by setting -webkit-overflow-scrolling: touch. The reason is that after setting this, iOS will create a UIScrollView for it and use hardware to accelerate rendering.

This problem itself is not complicated, and even after the requirements change, the implementation becomes very simple. But I hope that through this small example, every front-end person can think of more diverse ways to solve the problem when thinking about the needs. Even if it cannot be realized temporarily due to compatibility or other reasons, the growth gained in this process is also very beneficial.

Summarize

The above is the full content of this article. I hope that the content of this article can be of some help to your study or work. If you have any questions, you can leave a message to communicate.