overflow 原生在ios微信浏览器问题

Young-BeiJing 2018-11-08 02:14:00

原理： overflow实现局部滚动
问题： 1 当你滑动非overflow区域后再去滑动overflow区域将无法滚动
2 一进页面向下滑动 overflow区域也无法滑动
场景：在ios 微信内访问有问题 android和电脑模拟没有问题

哪位大神看看是哪的问题

<!DOCTYPE html>
<html lang="en" style="background-color:#f3f3f3;">

<head>
<meta charset="UTF-8">
<title>倍速视频</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://beisu-js.beisu100.com/lib/jquery.min.js"></script>
<style>
body {
position: fixed;
top: 0;
width: 100%;
}

.listCon {
width: 100%;
height: 300px;
background-color: aquamarine;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

.list {
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #ffffff;
}
</style>
</head>

<body style="margin: auto;">
<div class="listCon" id="listCon">
<div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
<div class="list">4</div>
<div class="list">5</div>
<div class="list">6</div>
<div class="list">7</div>
<div class="list">8</div>
<div class="list">9</div>
<div class="list">10</div>
<div class="list">11</div>
<div class="list">12</div>
</div>
</body>
<script>
let scrollEle = document.body;
scrollEle.addEventListener('touchstart', (evt) => {
// 修复微信的黑色弹性滚动与ios冲突问题
let scrollTop = scrollEle.scrollTop;
let scrollHeight = scrollEle.scrollHeight;
let height = scrollEle.offsetHeight;
let scrollTopTo;

// 顶部
scrollTopTo = Math.max(scrollTop, 1);

// 底部
if(scrollTopTo === scrollHeight - height) {
scrollTopTo--;
}

if(scrollTop != scrollTopTo) {
scrollEle.scrollTop = scrollTopTo;
}
});
</script>
</html>

...全文