React Native WebView iOS端如何单独禁用水平滚动？

我完全懂你的困扰——directionalLockEnabled只能在用户触发某一滚动方向后，才会限制另一方向，没法彻底锁死水平滚动；而scrollEnabled=false直接把所有滚动都禁用了，完全不是你想要的效果。这里有两个实用方案，你可以根据自己的场景选择：

方案一：自定义WebView拦截水平滚动事件 #

通过重写WebView的触摸或滚动方法，直接拦截水平方向的滚动操作，强制只允许垂直滚动。

实现代码（Android为例） #

public class NoHorizontalScrollWebView extends WebView {
    private float startX, startY;

    public NoHorizontalScrollWebView(Context context) {
        super(context);
    }

    public NoHorizontalScrollWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 记录触摸起始点坐标
                startX = event.getX();
                startY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                float deltaX = Math.abs(event.getX() - startX);
                float deltaY = Math.abs(event.getY() - startY);
                // 如果水平滑动距离大于垂直，直接消费事件，不让WebView处理水平滚动
                if (deltaX > deltaY) {
                    return true;
                }
                break;
        }
        return super.onTouchEvent(event);
    }

    // 额外禁用水平方向的过度滚动（拉拽回弹效果）
    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        return super.overScrollBy(0, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, 0, maxOverScrollY, isTouchEvent);
    }
}

这个方案的优势是强制生效，不管WebView加载的页面内容有没有横向溢出，都能彻底禁止水平滚动。

方案二：通过JavaScript注入限制页面横向滚动 #

如果WebView加载的是你可控的页面，可以直接通过JS修改页面样式，让页面本身无法产生横向滚动，从根源上解决问题。

实现代码 #

在WebView页面加载完成后执行以下JS代码：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 注入JS隐藏水平滚动条并禁止横向溢出
        view.loadUrl("javascript:document.body.style.overflowX='hidden'; document.documentElement.style.overflowX='hidden';");
    }
});

这个方案更贴合页面的自然行为，不会拦截用户的触摸操作，只是让页面内容被限制在垂直滚动范围内，适合页面本身可以调整样式的场景。

补充：为什么directionalLockEnabled不适用？ #

这个属性的逻辑是优先锁定已触发的滚动方向——比如用户先垂直滚动，之后的水平滑动会被拦截，但如果用户一开始就水平滑动，还是会触发横向滚动，没法做到彻底禁用，所以不符合你的需求。

内容的提问来源于stack exchange，提问作者Hadi KAR