Question

问题

我正在构建一个能够添加新项目的订单。每个项目行包括数量，单价，描述和总数。每次要添加新项目时，单击一个操作，并在原始下方插入一个新行，并带有一组空白字段。我面临的问题是当浏览器包含滚动条并且项目位于屏幕底部附近时。添加新项目时，新项目将显示在视图下方，要求用户必须手动滚动页面。

我在寻找什么。

我正在寻找一个jquery解决方案，

1）检测视图中上一个项目的位置。
2）之后新项目已经通过ajax插入页面，做一个很好的动画滚动页面将新创建的项目恢复为完全上一项的位置。

我尝试了什么。

<div id="lineItemContainer">
    <div class="tapestry-forminjector">
        <div><input type="text" name="quantity"/></div>
        <div><input type="text" name="unit price"/></div>
        <div><input type="text" name="description"/></div>
        <div><input type="text" name="total"/></div>
    </div>
</div>
<div id="buttonContainer"><input type="submit" value="Add New Item"/></div>

//此事件处理程序侦听新行，并在添加新行后触发。

$("#lineItemContainer div.tapestry-forminjector").live(Tapestry.AJAXFORMLOOP_ROW_ADDED, function(event){
    // This provides zero animation and currently does not work. 
    var y = $(window).scrollTop();
$(window).scrollTop(y+176);
}

思想我假设最好的解决方案是在添加新项目后获取前一个项目的y视图坐标，然后滚动页面直到最后一个项目位于相同的y视图坐标。我只是不确定如何完成这项任务。

提前致谢。 Tapestry.AJAXFORMLOOP_ROW_ADDED事件处理程序

更新

请西蒙要求

$.widget("ui.tapestryFormInjector", {
        options : {
            show : "highlight"
        },

        _create : function() {
            this.element.addClass("tapestry-forminjector")
        },

        destroy : function() {
            this.element.removeClass("tapestry-forminjector");

            $.Widget.prototype.destroy.apply(this, arguments);
        },

        trigger : function() {
            var that = this, el = $("#" + this.options.element);

            var successHandler = function(data) {
                $(data).log("data");
                $.tapestry.utils.loadScriptsInReply(data, function() {
                    // Clone the FormInjector element (usually a div)
                    // to create the new element, that gets inserted
                    // before or after the FormInjector's element.

                    var newElement = el.clone(false);
                    newElement.attr("id", data.elementId);
                    newElement.html(data.content);

                    newElement = that.options.below ? el.after(newElement) : el
                            .before(newElement);

                    newElement.effect(that.options.show);

                    newElement.trigger(Tapestry.AJAXFORMLOOP_ROW_ADDED);
                });

            };

            $(this.options).log("this.options.url" + this.options.url)
            $.tapestry.utils.ajaxRequest({
                type : "POST",
                url : this.options.url,
                success : successHandler
            });
        }
    });

Answer 1

如果我正确理解了问题..在回调函数中，如果你想要纯粹的JavaScript方式而没有动画

 newElement.scrollIntoView(value) 
 // value = true, if you want to align with top else false

如果你想要jQuery方式

.offset()计算元素相对于文档的位置。获取元素的最高值并使用动画将滚动条移动到该特定元素。它设置匹配元素的滚动条的垂直位置。

 $("html, body").animate({ scrollTop: $('#newElement').offset().top }, 1500);

希望这会有所帮助。如果我错了，请纠正我

Answer 2

$（“ html，body”）。animate（{scrollTop：$（document）.height（）-$（window）.height（）}）;

这将为您提供帮助

For more details

当ajax注入新内容时，Jquery自动滚动页面

2 个答案: