发现要求
假如在1个地区内只容许一部分地区造成翻转的实际效果，而其余一部分不可以挪动，你会选用甚么方式呢？
最先大家能够把这个要求溶解为两个小的难题来处理。
一部分地区固定不动
其余地区翻转
关键特性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特性特定或是剪裁內容而且3D渲染1个翻转条，或是当块级元素在其顶部或底部外溢时显示信息外溢的內容。
简易来讲，overflow-y特性在竖直方位上存在外溢的情况下，根据设定不一样的值会造成不一样的主要表现。以便完成翻转作用大家必须将该特性设定为scroll，以后，不管块级元素的內容是不是外溢，访问器都会转化成1个翻转条而且掩藏器皿中內容外溢的一部分，仅有在翻转以后才会显示信息。
举个事例：
.test{
width: 200px;
/* 重要款式 */
height: 200px;
overflow-y: scroll;
/* 下列不相干款式 */
background: #f14c5c;
color: #fff;
}
<div class="test">
这里边只是1段检测的內容这里边只是1段检测的內容这里边只是1段检测的內容
这里边只是1段检测的內容这里边只是1段检测的內容这里边只是1段检测的內容
这里边只是1段检测的內容这里边只是1段检测的內容这里边只是1段检测的內容
这里边只是1段检测的內容这里边只是1段检测的內容这里边只是1段检测的內容
</div>
实际效果图以下：
根据刚刚的事例大家能够得出结果，要是限定块级元素的高宽比，当然便可以完成仅有该元素的內容可翻转而不危害其它內容。可是在完成全过程中遇到了新的难题，怎样完成对设计方案图的精准复原？
设计方案图以下：
全部弹出框高宽比是随网页页面高宽比自融入的，题目一部分和底部按钮一部分部位是固定不动的，正中间目录必须占满剩下高宽比，而且內容可翻转。全部弹窗被最外层div包裹，底部按钮相对它开展精准定位。历经思索后，尝试了4种计划方案，共享给大伙儿。
计划方案表明
大家必须明确的关键难题便是正中间內容的高宽比，也就是height在不一样规格显示屏下的精准高宽比。
vh
相对视口的高宽比，视口被平均分为100企业，即1vh等于视口高宽比的1%。
可是vh企业对低版本号安卓系统和ios适用不足好，手机微信访问器X5核心不适用，尽管早已升級到blink核心，可是以便保证万无1失，舍弃选用这类计划方案。此外也没法精准操纵和底部按钮边距。
height百分比
和vh相近，没法精准操纵和底部按钮的边距，自融入实际效果不太好。
calc
针对以上两种计划方案的存在的难题，calc测算特性能够很好的处理，只必须设定height:calc(100% - 60px)，便可以精确的占满正中间一部分，而且维持和底部按钮的边距。
可是的是针对低版本号的安卓系统访问器、ios访问器包含手机微信访问器在内的流行访问器适用都不太好，仍然只能弃用。
假如适配性再好1点的话，calc计划方案应当是最好是用且最佳雅的1种完成方法。
js
单纯性的应用css没法完成，就只能依靠js来动态性测算內容所必须的高宽比来开展设定。另外这类方式也基本上不容易遇到适配性的难题，是对雅致退级的1种实践活动。
题外话
掩藏不好看的翻转条。
假如立即设定overflow-y:scroll在ios下自始至终会出現很丑的翻转条，大家能够对该元素设定下列特性：
margin-right: ⑵0px; padding-right: 20px;
对翻转条开展1个小小的的hack，它就不再会出現了，客户互动时会有和原生态翻转1样的觉得，体验更佳。
@prototype 经大大提示，设定webkit访问器的独享特性::-webkit-scrollbar能更灵便的操纵翻转条，在此谢谢。假如只必须掩藏，以下编码便可：
::-webkit-scrollbar{
display: none
}
尽管挪动端访问器webkit核心占多数，但是還是要在真机检测后再得出结果，假如一些访问器不适用这个特性的话，仍然可使用上面的小hack。
-webkit-overflow-scrolling: touch
在ios机器设备中，运用overflow来仿真模拟翻转会出現卡顿的状况，能够根据设定-webkit-overflow-scrolling: touch来处理，缘故是设定后ios会为其建立1个UIScrollView，运用硬件配置来加快3D渲染。
这个难题自身其实不繁杂，乃至要求变更后，完成变的十分简易。可是期待能根据这个小事例能让每个前端开发人在思索要求时都可以尽量的去想更多样的方式来处理难题，即便由于适配性或其它缘故临时没法完成，在这个全过程中得到的发展也是是非非常有利的。
总结
以上便是这篇文章内容的所有內容了，期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助，假如有疑惑大伙儿能够留言沟通交流。