<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
/*body{
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? position: fixed;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: 0;
? ? ? ? }*/
? ? ? ? .header, .footer {
? ? ? ? ? ? position: fixed;
? ? ? ? ? ? width: 100vw;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? line-height: 40px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? z-index: 3;
? ? ? ? }
? ? ? ? .header {
? ? ? ? ? ? top: 0;
? ? ? ? ? ? border-bottom: 1px solid #e6e6e6;
? ? ? ? }
? ? ? ? .footer {
? ? ? ? ? ? bottom: 0;
? ? ? ? ? ? border-top: 1px solid #e6e6e6;
? ? ? ? }
? ? ? ? .scrollEle {
? ? ? ? ? ? position: fixed;
? ? ? ? ? ? width: 100vw;
? ? ? ? ? ? top: 40px;
? ? ? ? ? ? bottom: 40px;
? ? ? ? ? ? z-index: 2;
? ? ? ? ? ? background: #fff;
? ? ? ? ? ? overflow-y: scroll;
? ? ? ? ? ? -webkit-overflow-scrolling: touch;
? ? ? ? }
? ? </style>
</head>
<body>
<div class="header">Header</div>
<div class="scrollEle">
? ? <p>5fgawehyerj付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p><p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p><p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p><p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p><p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
? ? <p>付水電費(fèi)會(huì)</p>
</div>
<div class="footer">Footer</div>
</body>
<script>
? var startX = 0, startY = 0;
? function touchStart(e) {
? ? try {
? ? ? var touch = e.touches[0],
? ? ? ? x = Number(touch.pageX),
? ? ? ? y = Number(touch.pageY);
? ? ? startX = x;
? ? ? startY = y;
? ? } catch (e) {
? ? ? alert(e);
? ? }
? }
? document.addEventListener('touchstart', touchStart);
? var ele = document.querySelector('.scrollEle');??//點(diǎn)擊需要滾動(dòng)的地方
? ele.ontouchmove = function (e) {
? ? var point = e.touches[0],
? ? ? eleTop = ele.scrollTop,
? ? ? eleScrollHeight = ele.scrollHeight,
? ? ? eleOffsetHeight = ele.offsetHeight,
? ? ? eleTouchBottom = eleScrollHeight - eleOffsetHeight;
? ? if (eleTop === 0) {
? ? ? if (point.clientY > startY) {
? ? ? ? e.preventDefault();
? ? ? }
? ? }
? ? else if (eleTop === eleTouchBottom) {
? ? ? if (point.clientY < startY) {
? ? ? ? e.preventDefault()
? ? ? }
? ? }
? };
? var headerDiv = document.querySelector('.header');? //點(diǎn)擊時(shí)不能滾動(dòng)的地方
? headerDiv.ontouchmove = function (e) {
? ? e.preventDefault();
? };
</script>
</html>
//只需要加上js,然后設(shè)置好點(diǎn)擊時(shí)需要滾動(dòng)和不能滾動(dòng)的兩個(gè)div.
