假如在一个地区内只允许部份地区发生转动的结果，而其他部份不能挪动，你会采纳什么要领呢？

作者：Icarus
原文链接：http://xdlrt.github.io/2016/1…

起首我们能够把这个需求分解为两个小的题目来处理。

• 部份地区牢固

• 其他地区转动

部份地区牢固

1. 为页面的body部份设置height: 100%以及overflow: hidden，即禁用页面原生的转动，保证只会显现一屏的内容。

2. 牢固地区采纳相对定位。

其他地区转动

中心属性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">
    这内里只是一段测试的内容这内里只是一段测试的内容这内里只是一段测试的内容
    这内里只是一段测试的内容这内里只是一段测试的内容这内里只是一段测试的内容
    这内里只是一段测试的内容这内里只是一段测试的内容这内里只是一段测试的内容
    这内里只是一段测试的内容这内里只是一段测试的内容这内里只是一段测试的内容
</div>

结果以下：

经由过程适才的例子我们能够得出结论，只需限定块级元素的高度，天然就能够完成只需该元素的内容可转动而不影响别的内容。然则在完成过程当中碰到了新的题目，怎样完成对设计图的准确复原？设计图以下：

全部弹出框高度是随页面高度自适应的，题目部份和底部按钮部份位置是牢固的，中心列表须要占满盈余高度，而且内容可转动。全部弹窗被最外层div包裹，底部按钮相关于它举行定位。经由思索后，尝试了四种计划，分享给人人。

计划申明

我们须要肯定的中心题目就是中心内容的高度，也即是height在差别尺寸屏幕下的准确高度。

vh

相关于视口的高度，视口被均分为100单元，即1vh即是视口高度的1%。

然则vh单元对低版本安卓和ios支撑不够好，微信浏览器X5内核不支撑，虽然已升级到blink内核，然则为了确保十拿九稳，摒弃采纳这类计划。别的也没法准确掌握和底部按钮边距。

height百分比

和vh相似，没法准确掌握和底部按钮的边距，自适应结果不好。

calc

关于以上两种计划的存在的题目，calc盘算属性能够很好的处理，只须要设置height:calc(100% - 60px)，就能够精准的占满中心部份，而且坚持和底部按钮的边距。

惋惜的是关于低版本的安卓浏览器、ios浏览器包含微信浏览器在内的主流浏览器支撑都不好，依旧只能弃用。
假如兼容性再好一点的话，calc计划应该是最好用且最文雅的一种完成体式格局。

js

纯真的运用css没法完成，就只能借助js来动态盘算内容所须要的高度来举行设置。同时这类要领也险些不会碰到兼容性的题目，是对文雅降级的一种实践。

题外话

隐蔽丢脸的转动条。

假如直接设置overflow-y:scroll在ios下一直会涌现很丑的转动条，我们能够对该元素设置以下属性：

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

对转动条举行一个小小的hack，它就再也不会涌现了，用户交互时会有和原生转动一样的觉得，体验更佳。

@__prototype__ 经大大提示，设置webkit浏览器的私有属性::-webkit-scrollbar能更天真的掌握转动条，在此谢谢。假如只须要隐蔽，以下代码即可：

::-webkit-scrollbar{
    display: none
}

虽然挪动端的浏览器webkit内核占多数，不过照样要在真机测试后再得出结论，假如有些浏览器不支撑这个属性的话，依旧能够运用上面的小hack。

-webkit-overflow-scrolling: touch

在ios装备中，应用overflow来模仿转动会涌现卡顿的状况，能够经由过程设置-webkit-overflow-scrolling: touch来处理，缘由是设置后ios会为其建立一个UIScrollView，应用硬件来加快衬着。

这个题目自身并不庞杂，以至需求变动后，完成变的异常简朴。然则希望能经由过程这个小例子能让每个前端人在思索需求时都能够尽量的去想更多样的要领来处理题目，纵然由于兼容性或别的缘由临时没法完成，在这个过程当中取得的生长也是异常有益的。