超出容器的滚动布局

前言

在前端的页面布局中，制作一个区域内的滚动条是必备的基础知识，但是有很多刚入门的同学可能摸不到头脑，不知道该如何入手。那么本文将从代码实例为大家分享一个简单的教程。

首先，作为常识大家需要知道你制作的滚动条是属于div的还是页面的，你希望的页面鼠标滚动是调用哪里的，很多时候小伙伴们搞不清楚页面的和容器部分的。一定要清楚的知道你的产品布局中，这时候滚动希望是哪部分页面内容视图发生变化。

实例

实现思路

关键词: 视口，内容容器，内容

视口：也就是你需要展示内容的窗口大小，默认情况下页面的视口就是screen大小，页面的滚动，任何元素覆盖区域内的滚动调用的都是页面的滚动。异常情况就是div内有滚动区域，那么鼠标在当前元素焦点的时候，触发的是元素内内容的滚动，不会触发页面的滚动。这也是该布局实现的基本原理之一。当你控制决定好视口大小之后，对于超出区域设置超出不可见。

内容容器：内容容器就是你存放不定高度内容的容器，大小与视口大小完全一致。它是实现滚动布局的关键容器，需要设置超出区域自动，自动的含义就是不超过高度无滚动条，超出大小出现滚动条，当你在该内容容器触发鼠标滚动时触发滚动条。

内容：存放不定高度的内容，你的内容如果包含多个div或者其他元素都需要放入这个元素中。

效果：从效果上看，区块元素内的滚动布局特别像iframe的窗口载入一个新的页面dom，如果你和产品或设计不好沟通，你可以用iframe或者说新打开的浏览器窗口来跟他解释这个效果。

代码

<div class="par">
  <div class="container">
    <p class="container-cont">111111</p>
  </div>
</div>
<!--css 开始  -->
.par{
  width:100px;
  background:red;
  height:100px;
  overflow:hidden;
  position:relative
}
.par .container{
  position:absolute;
  width:100px;
  left:0;
  top:0;
  bottom:0;
  overflow:auto;
}
.par .container .container-cont{
  height:1000px;
}

codepen案例

codepen案例地址