当页面在移动网站中放大时，滑块停止移出屏幕

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; 添加到滑块容器来解决此问题。