SOURCE

console 命令行工具 X clear

                    
>
console
$('.main').on('scroll', function() {
  $('#scrollTop').text($('.main').scrollTop())
}) $(document).on('swipe', function(e) {
  $('#windowScrollTop').text('swipe')
})
<div class="wrap flex flex-v">
  <div class="header">
    固定顶部部
  </div>
  <div class="main flex-pack-center">
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
    <p>
      高度自动适应
    </p>
  </div>
  <div class="footer">
    <span id='windowScrollTop'>
      -
      <span id='scrollTop'>
      </span>
      固定底部
      <input value="54545455654" />
  </div>
</div>
* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.wrap {
  width: 100%;
  height: 100%;
}

.header,
.footer {
  height: 40px;
  line-height: 40px;
  background-color: #D8D8D8;
}

.main {
  overflow: auto;
}


/* ============================================================
   flex:定义布局为盒模型
   flex-v:盒模型垂直布局
   flex-1:子元素占据剩余的空间
   flex-align-center:子元素垂直居中
   flex-pack-center:子元素水平居中
   flex-pack-justify:子元素两端对齐
   兼容性:ios 4+、android 2.3+、winphone8+
   ============================================================ */

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-v {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flex-align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-pack-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-pack-justify {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

本项目引用的自定义外部资源