iOSのWebViewでスクロールをプログラム的に無効化する方法

iOSアプリ開発において、WebView内のスクロールを無効にしたい場面はよくあります。実は、iOSではWebViewのスクロール制御が非常に簡単に行えるようになっており、たった1行のコードで実現できます。

この記事では、まず結論となるコードを紹介し、その後、Xcodeでのサンプルプロジェクトをゼロから作成しながら、WebViewの読み込みからスクロール無効化までの手順を詳しく解説します。

結論：1行のコードでスクロールを無効化できる

iOSはWebViewの内部にある「scrollView」プロパティを外部に公開しています。このscrollViewのスクロール機能をオフにすれば、WebView全体のスクロールを防ぐことができます。

webView.scrollView.isScrollEnabled = false

上記のコードを追加するだけで、WebView上のスクロールが無効になります。「とにかくスクロールだけ止めたい」という方は、この1行で対応完了です。

サンプルプロジェクトで学ぶ実装手順

ここからは、Xcodeでサンプルプロジェクトを作成し、WebViewの読み込み方法とスクロール無効化の手順を順番に見ていきましょう。

Step 1：プロジェクトの作成

Xcodeを起動し、「New Project → Single View Application」を選択します。プロジェクト名は「WebViewScrollDisabling」としましょう。

Step 2：StoryboardにUIWebViewを配置

Main.storyboardを開き、UIWebViewを画面にドラッグ＆ドロップして配置します。

Step 3：IBOutletの接続

ViewControllerクラスに、配置したWebView用のIBOutletを追加します。名前は「webView」とします。

@IBOutlet weak var webView: UIWebView!

Step 4：WebViewでWebサイトを読み込む

ここでは例として、TutorialsPointの公式サイトを読み込みます。ViewControllerクラスのviewDidLoadメソッドに、以下のコードを追記してください。

webView.loadRequest(URLRequest(url: URL(string: "https://www.tutorialspoint.com/index.htm")!))

Step 5：アプリを実行して動作確認

この状態でアプリをビルド・実行すると、TutorialsPointのサイトがWebViewに表示されます。この時点ではまだスクロールが有効なので、画面をスワイプしてコンテンツが上下にスクロールできることを確認してみてください。

Step 6：スクロールを無効化するコードを追加

それでは本題のスクロール防止です。WebViewの裏側にあるscrollViewのスクロールを停止させることで実現できます。Webサイトを読み込む処理の直後に、以下の1行を追加しましょう。

webView.scrollView.isScrollEnabled = false

追加後のviewDidLoadメソッドは以下のようになります。

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    webView.loadRequest(URLRequest(url: URL(string: "https://www.tutorialspoint.com/index.htm")!))
    webView.scrollView.isScrollEnabled = false
}

Step 7：再度実行してスクロール禁止を確認

もう一度アプリを実行します。先ほどと同様にTutorialsPointのサイトは表示されますが、今度はスワイプしてもスクロールできなくなっているはずです。実際に指でスワイプして、スクロールが無効になっていることを確認してみましょう。

補足：WKWebViewを使う場合も同じ方法が使える

なお、UIWebViewはiOS 12以降非推奨（Deprecated）となっており、現在はWKWebViewの使用が推奨されています。幸いなことに、WKWebViewでもscrollViewプロパティが公開されているため、まったく同じ方法でスクロールを無効化できます。

webView.scrollView.isScrollEnabled = false
// バウンス（端までスクロールした際の跳ね返り）も止めたい場合
webView.scrollView.bounces = false

また、バウンス効果（端までスクロールしたときの跳ね返り）も併せて無効にしたい場合は、「bounces」プロパティをfalseに設定するとより完全にスクロール操作を防げます。用途に応じて使い分けてください。