在移動網站中放大頁面時，滑塊可停止移出屏幕

Question

我正在將QapTcha插件添加到我的網站中，正在使用jquery.ui.touch-punch.min.js。 但是，當我從移動網站放大頁面並向左拖動滑塊時，它會移出該欄，這是不應該的。 我已附上圖片，以了解發生的事情。

當您放大頁面並滑動滾動條時，會出現問題，如第三個圖像中所見，它向頁面左移。 這是我的代碼：

 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();
                            });
                        }
                    }
                }
            });

當頁面放大時，如何防止其移出欄？

Answer 1

指向該問題的有效示例的鏈接將有助於解決該問題。

就我所知，我唯一想到的就是定位可能出問題了。 您可以嘗試通過添加position: relative;解決此問題position: relative; 到滑塊容器。