1

问题

我正在构建一个能够添加新项目的订单。每个项目行由数量、单价、描述和总计等内容组成。每次您想添加一个新项目时，您单击一个操作，并在原始项目下方插入一个新行，其中包含一组空白字段。我面临的问题是当浏览器包含滚动条并且项目靠近屏幕底部时。添加新项目时，新项目会出现在视图下方，要求用户必须手动滚动页面。

我在寻找什么。

我正在寻找一个 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
            });
        }
    });
4

2 回答 2

2

如果我正确理解了问题..在回调函数中，如果您想要没有动画的纯 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);

希望这可以帮助。如果我错了，请纠正我

于 2013-02-14T15:59:31.363 回答
0

$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

这将帮助你

更多细节

于 2019-01-31T10:44:28.123 回答