javascript - モバイルサイトでページがズームされたときに画面外への移動を停止するスライダー

Question

QapTcha プラグインを自分の Web サイトに追加しています。jquery.ui.touch-punch.min.js を使用しています。しかし、モバイル サイトからページを拡大して、スライダーを左にドラッグすると、スライダーがバーの外に出てしまいます。何が起こっているのかを理解するために写真を添付し​​ました。

この問題は、ページを拡大し、スクロール バーをスワイプすると、3 番目の画像でわかるようにページから左に移動すると発生します。これは私のコードです:

 Slider.draggable({

                containment: bgSlider,
                axis: 'x',
                stop: function (event, ui) {
                    if (ui.position.left > 123) {
                        Slider.draggable('disable').css('cursor', 'default');
                        inputQapTcha.val("");
                        TxtStatus.css({ color: '#307F1F' }).text(opts.txtUnlock);
                        Icons.css('background-position', '-16px 0');
                        //form.find('input[type=\'submit\']').removeAttr('disabled');
                        $(opts.buttonLock).removeAttr('disabled');
                        ///Show a fornm
                        if ($(opts.buttonLock).attr("show")) {
                            $($(opts.buttonLock).attr("show")).css("display", "block");
                            $("#QapTcha").fadeOut(500);
                        }
                        else if (opts.buttonLock == 'input[name="SendMail"]') {
                            $(opts.buttonLock).bind("click", function () {
                                AuroraJS.Modules.SendMail(this);
                            });
                        }
                        else if (opts.buttonFunc != "") {
                            $(opts.buttonLock).bind("click", function () {
                                opts.buttonFunc();
                            });
                        }
                    }
                }
            });

ページがズームインされたときにバーから移動しないようにするにはどうすればよいですか?