时间戳

首页 > 解决方案 > 当页面在移动网站中放大时，滑块停止移出屏幕

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

问题描述

我正在向我的网站添加一个 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();
                            });
                        }
                    }
                }
            });

当页面放大时，如何防止它移出栏？

标签： javascriptjquerycssjquery-ui-touch-punch

解决方案

指向该问题的工作示例的链接将有助于解决该问题。

据我所知，我唯一能想到的就是定位可能会出错。您可以尝试通过添加position: relative;到滑块容器来解决此问题。

推荐阅读