如何解决ios 中的 WKWebView如何禁用具有属性的页面子元素的滚动反弹 - 溢出：自动||滚动
我发现了很多类似的问题。
解决方案是这样的：
wkWebView.scrollView.bounces = NO;
wkWebView.scrollView.alwaysBounceHorizontal = NO;
wkWebView.scrollView.alwaysBounceVertical = NO;
它有效，但仅适用于页面的顶级元素（html、body）。
我正在寻找以下构造的解决方案：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scroll bounce behavior</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
body,html{width: 100%; height: 100%; background: white;}
.scroll-area{
width: 200px;
height: 400px;
overflow: auto;
margin: 10px 0;
background: yellow;
}
.scroll-content{
width: 1000px;
height: 1000px;
background: repeating-radial-gradient(black,transparent 100px);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="scroll-area">
<div class="scroll-content"></div>
</div>
<div class="scroll-area">
<div class="scroll-content"></div>
</div>
</div>
</body>
</html>
对于正文滚动 wkWebView.scrollView.bounces = NO; 有效，但对于 .scroll-area 无效。
我尝试了一些 js 解决方案，大概是：
document.querySelector('.scroll-area').addEventListener('scroll',function(){
if( this.scrollTop <= 0 ){
console.warn('this.scrollTop: ' + this.scrollTop);
this.scrollTop = 0;
/*
this.style['overflow-y'] = 'hidden';
setTimeout(function(){
this.style['overflow-y'] = 'auto';
}.bind(this),0);
*/
}
if( this.scrollLeft <= 0 ){
console.warn('this.scrollLeft : ' + this.scrollLeft );
this.scrollLeft = 0;
/*
this.style['overflow-x'] = 'hidden';
setTimeout(function(){
this.style['overflow-x'] = 'auto';
}.bind(this),0);
*/
}
},true);
但是当滚动到滚动区域的边界时，这种方法会导致故障。
建议：
...addEventListener('touchstart,touchmove' ...
if( ...condition... )
event.preventDefault();
...
也不是很好的决定。当滚动同时具有 x 和 y 方向时会出现问题。并且在通过快速滑动调用滚动时没有帮助。
对我来说最好的解决方案是永久禁用 WKWebView 的 html 页面所有元素的滚动反弹行为，而不使用 js、css。
有可能吗？
提前致谢。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。