时间戳

首页 > 解决方案 > ios 中的 WKWebView。如何使用属性禁用页面子元素的滚动反弹 - 溢出：（自动||滚动）

ios - 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 方向时会出现问题。并且在通过快速滑动调用滚动时无济于事。

对我来说最好的解决方案是永久禁用 html 页面所有元素的滚动反弹行为，WKWebView而不使用 js、css。

有可能的？

提前致谢。

标签： iosscrollwkwebviewbounce

解决方案

推荐阅读