移动端实现内滚动的4种方案

6 年前 · 来自专栏前端进击者

也树

钉钉文档前端工程师。

如果在一个区域内只允许部分区域产生滚动的效果，而其余部分不能移动，你会采用什么方法呢？

作者：Icarus

原文链接： http:// xdlrt.github.io/2016/12 /02/2016-12-02

首先我们可以把这个需求分解为两个小的问题来解决。

部分区域固定
其余区域滚动

部分区域固定

为页面的body部分设置`height: 100%`以及`overflow: hidden`，即禁用页面原生的滚动，保证只会显示一屏的内容。
固定区域采用绝对定位。

其余区域滚动

核心属性overflow-y

mdn对于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.
overflow-y属性指定或是裁剪内容并且渲染一个滚动条，或是当块级元素在其顶部或底部溢出时显示溢出的内容。

简单来说，`overflow-y`属性在垂直方向上存在溢出的时候，通过设置不同的值会产生不同的表现。为了实现滚动功能我们需要将该属性设置为`scroll`，之后，无论块级元素的内容是否溢出，浏览器都会生成一个滚动条并且隐藏容器中内容溢出的部分，只有在滚动之后才会显示。

举个例子：

.test{
	width: 200px;
	/* 关键样式 */
	height: 200px;
	overflow-y: scroll;
	/* 以下无关样式 */
	background: #f14c5c;
	color: #fff;
<div class="test">