移动端如何实现内滚动

.test{
  width: 200px;
  /* 关键样式 */
  height: 200px;
  overflow-y: scroll;
  /* 以下无关样式 */
  background: #f14c5c;
  color: #fff;
}

  这里面只是一段测试的内容这里面只是一段测试的内容这里面只是一段测试的内容
  这里面只是一段测试的内容这里面只是一段测试的内容这里面只是一段测试的内容
  这里面只是一段测试的内容这里面只是一段测试的内容这里面只是一段测试的内容
  这里面只是一段测试的内容这里面只是一段测试的内容这里面只是一段测试的内容

效果图如下：

通过刚才的例子我们可以得出结论，只要限制块级元素的高度，自然就可以实现只有该元素的内容可滚动而不影响其它内容。但是在实现过程中遇到了新的问题，如何实现对设计图的精确还原？

设计图如下：

整个弹出框高度是随页面高度自适应的，标题部分和底部按钮部分位置是固定的，中间列表需要占满剩余高度，并且内容可滚动。整个弹窗被最外层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，利用硬件来加速渲染。

这个问题本身并不复杂，甚至需求更改后，实现变的非常简单。但是希望能通过这个小例子能让每一个前端人在思考需求时都能够尽可能的去想更多样的方法来解决问题，即使因为兼容性或其它原因暂时无法实现，在这个过程中获得的成长也是非常有益的。

以上是“移动端如何实现内滚动”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！