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

2018-11-08 02:14:00 152 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

[Stanford CS217]CUDA中矩阵乘法GEMM优化的最关键点：向量内积和向量外积分别取行和取列对于矩阵C中的每一个tile，矩阵A与矩阵B中的tile只需要读取一次，这样就可以达到 O(N) 的计算强度。理想情况下性能应当受限于算术吞吐量，确切来说对于一个大型方阵，即 M=N=K ，矩阵乘法的数学操作复杂度为 O(N3) ，而数据量为 O(N2) ，同时计算强度为 N （这里的计算强度可以被理解为同一个数据被重复利用的次数）。GEMM就是指计算 C=A∗B+C ，其中 A 、B和C都是矩阵，A是 M×K 的矩阵，B是 K×N 的矩阵， C是 M×N 的矩阵。这就是向量内积和向量外积的最大区别。阅读详情

原理： 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>

...全文