Four schemes implemented within the rolling movement end

To allow only part of the area within a region to produce a rolling effect, and the rest can not move, what method would you do?

Author: Icarus
Original link: HTTP: //xdlrt.github.io/2016/1 ...

First, we can put this demand into two small problems to solve.

• Fixing the partial region

• The remaining area scroll

Fixing the partial region

1. For the body section of the Settings page height: 100%, and overflow: hiddenthat page is disabled scroll native ensure that only displays the contents of a screen.

2. Absolute positioning fixing region.

The remaining area scroll

Core Propertiesoverflow-y

mdn definition overflow-y is
of A Block-Level Element, When IT overflows. of The overflow-y Property specifies Whether to Clip Content, the render A Scroll bar, or the display overflow Content AT The Top and bottom Edges
overflow-y attribute specifies or is tailored content and renders a scroll bar, or block-level elements when the display content overflow at the top or bottom of the overflow.

Briefly, overflow-yproperty exists in the vertical direction overflow time, by setting different values will result in different performance. In order to achieve scrolling function we need to set the property scroll, then, regardless of whether the contents of block-level elements of overflow, the browser scroll bar will generate a hidden part of the container and the contents spilled, only appear after scrolling.

for example:

.test{
    width: 200px;
    /* 关键样式 */
    height: 200px;
    overflow-y: scroll;
    /* 以下无关样式 */
    background: #f14c5c;
    color: #fff;
}
<div class="test">
    这里面只是一段测试的内容这里面只是一段测试的内容这里面只是一段测试的内容
    这里面只是一段测试的内容这里面只是一段测试的内容这里面只是一段测试的内容
    这里面只是一段测试的内容这里面只是一段测试的内容这里面只是一段测试的内容
    这里面只是一段测试的内容这里面只是一段测试的内容这里面只是一段测试的内容
</div>

Results are as follows:

Just by way of example, we can conclude that as long as the block-level elements of height restrictions, can be achieved only natural content of the element can be scrolled without affecting other content. But new problems encountered in the implementation process, how to accurately reproduce the design chart? Plans are as follows:

Pop-up box with the entire height of the page is highly adaptive, a header portion and a button portion is fixed to the bottom position, an intermediate list needs to fill the remaining height, and the content can be scrolled. The whole is wrapped pop outermost div, bottom button positioned with respect to it. After thinking, try four programs, for everyone to share.

plan description

We need to identify the core issue is the content of middle height, that is heightthe exact height at different screen sizes.

Articles

With respect to the height of the viewport, the viewport is divided into 100 units, i.e. 1vh equal to 1% of the height of the viewport.

But vh units for low and ios version of Android support is not good enough, micro-channel browser X5 kernel does not support, although the kernel has been upgraded to blink, but to be sure, give up using this program. There is also unable to accurately control and buttons at the bottom margin.

height percentage

Vh and the like, can not be precisely controlled and bottom margins of the button, not adaptive effect.

calc

For the above two schemes exist problems, calccomputed attribute can solve, only need to set height:calc(100% - 60px), can be accurately occupies the middle portion, and holds the bottom margins and buttons.

Unfortunately for low version of the Android browser, ios browsers include micro-channel browser, including the mainstream browser support is not good, still only abandoned.
If compatibility no matter how little, then, calc program should be the best and most elegant with an implementation.

js

Simply use css can not be achieved, it can only be set by means of highly js to dynamically calculate the required content. At the same time this method is hardly encounter compatibility problems, it is a practice of graceful degradation.

Digression

Hide the scroll bar unsightly.

If directly overflow-y:scrollscrollbars always appear ugly in ios, we can set the following properties of the elements:

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

Scrollbar by a small hack, it will no longer appear, and there will be native to scroll the same feeling when user interaction, experience better.

@__prototype__ been greatly reminders, set the webkit browser's private property ::-webkit-scrollbarcan be more flexible control scroll bar to thank. If you just want to hide, the following code:

::-webkit-scrollbar{
    display: none
}

While the mobile terminal browser webkit kernel majority, but still have to conclude that the real test and then, if some browsers do not support this attribute, it can still use the above small hack.

-webkit-overflow-scrolling: touch

In the ios device, use overflowto simulate the situation will scroll Caton, you can set -webkit-overflow-scrolling: touchto resolve, because the will to create a set ios UIScrollView, using hardware accelerated rendering.

The question itself is not complicated, even after demand change, to achieve become very simple. But hope that through this small example to make every person in the front-end thinking needs are able to think more diverse ways as possible to solve the problem, even if temporarily because of compatibility or other reasons can not be achieved in this process growth is also very helpful.