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

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; 到滑块容器。