SOURCE

// 防止内容区域滚到底后引起页面整体的滚动
var content = document.querySelector('main');
var startY;

content.addEventListener('touchstart', function(e) {
  startY = e.touches[0].clientY;
});

content.addEventListener('touchmove', function(e) {
  // 高位表示向上滚动
  // 底位表示向下滚动
  // 1容许 0禁止
  var status = '11';
  var ele = this;

  var currentY = e.touches[0].clientY;

  if (ele.scrollTop === 0) {
    // 如果内容小于容器则同时禁止上下滚动
    status = ele.offsetHeight >= ele.scrollHeight ? '00': '01';
  } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
    // 已经滚到底部了只能向上滚动
    status = '10';
  }

  if (status != '11') {
    // 判断当前的滚动方向
    var direction = currentY - startY > 0 ? '10': '01';
    // 操作方向和当前允许状态求与运算，运算结果为0，就说明不允许该方向滚动，则禁止默认事件，阻止滚动
    if (! (parseInt(status, 2) & parseInt(direction, 2))) {
			console.log(status);
			e.preventDefault();
    }
  }
});

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
</meta>
<!-- fixed定位的头部 -->
<header>
	<span><</span>
	<span>...</span>
</header>
<!-- 可以滚动的区域 -->
<main>
  <div class="content">
    <!-- 内容在这里... -->
  </div>
</main>
<!-- fixed定位的底部 -->
<footer>
  <input type="text" placeholder="Input..." />
  <button class="submit">
    提交
  </button>
</footer>

body {
  overflow: hidden;
  max-width: 750px;
  background-color: #f8f8f8;
}

header,
footer,
main {
  display: block;
}

header {
  position: fixed;
  height: 50px;
  left: 0;
  right: 0;
  top: 0;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .2);
}

footer {
  position: fixed;
  height: 34px;
  left: 0;
  right: 0;
  bottom: 0;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

footer input {
	height: 100%;
	border: 0;
	outline: 0;
	flex: 1;
	margin-right: 10px;
}

main {
  /* main绝对定位，进行内部滚动 */
  position: absolute;
  top: 50px;
  bottom: 34px;
  left: 0;
  right: 0;
  /* 使之可以滚动 */
  overflow-y: scroll;
  /* 使之可以流畅滚动 */
  -webkit-overflow-scrolling: touch;
}

main .content {
  height: 2000px;
  background: linear-gradient(180deg, red, blue);
}