获取动态创建的验证容器以使用元素滚动

Question

我们动态创建一个错误容器，将其附加到正文，然后将其放在错误所在的元素上。这很有效，直到用户滚动。错误容器保持在相同的固定位置，而元素在后台滚动出屏幕。如何在滚动事件期间重新定位error元素以使其也滚动？

显示错误容器外观的屏幕截图。需要重新定位容器并在用户滚动时滚动，以便它与所用的元素保持一致。目前，它处于固定的位置。

现在，当错误位于可以滚动的位置时。请注意它是如何正确显示的。

现在注意页面滚动后，错误不再停留在它所用的元素上。我需要在滚动时使用元素的新位置正确地重新定位此元素。

提前致谢！

我知道没有代码就很难回答问题，但我必须要小心，因为这是公司的事情。

这是我在“validation.js”库中构建容器的地方，作为我们正在使用的模板的jsViews包的一部分。

buildContainer: function(ev)
        {
            var $targetElem = $(ev.target),
                leftX = $targetElem.offset().left,
                topY = $targetElem.offset().top,
                widthY = $targetElem.outerWidth(),
                heightX = $targetElem.outerHeight();

            var msg = $targetElem.closest("label").val();
            var appendingContainer = null;

            $targetElem.closest("label").val('');

            return $('<div/>', {
                html: '<ul>' + this.isValid + '</ul><span></span>',
                'class': 'validation-tooltip-error',
                css: {
                    top: topY - heightX,
                    left: leftX + widthY - 20
                }
            }).appendTo("body");
        }

以下是错误容器的CSS：

.validation-工具提示错误     {       位置：绝对;       宽度：自动;       z-index：9999999999;     }

.validation-tooltip-error ul
{
    padding: 0;
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    color: #eeeeee;
    background: #a9502a;
    padding: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    list-style: none;
    line-height: 16px;
    -moz-box-shadow: 0 -2px 4px #666666;
    -webkitbox-shadow: 0 -2px 4px #666666;
    box-shadow: 0 -2px 4px #666666;
}

.validation-tooltip-error span
{
   display: block;
   width: 0;
   height: 0;
   border-left: 0 solid transparent;
   border-right: 15px solid transparent;
   border-top: 10px solid #a9502a;
   border-top: 10px solid #a9502a;
   border-bottom: 0;
   margin-left: 10px;
}

希望这有点帮助。

Answer 1

也许您可以将错误附加到它指向的输入/标签附近？我通常有这样的东西

<div class = "input-row">
    <label>Label</label>
    <input type = "text" />
    <span class = "error">Error</span>
</div>

然后我可以将错误标签设置为绝对位置，将输入行设置为相对位置。