4

我有一个页面，其中各种元素的内容被 AJAXed 到核心结构中。结构本身非常简单，元素上没有任何特殊定位：

<body>
    <article id="one"></article>
    <article id="two"></article>
    <article id="three"></article>
</body>

每篇文章的内容是通过 AJAX 调用加载的，并且每篇文章的内容长度无法提前知道。此外，可以使用 URL 导航到每个部分（因此我可以#two使用mysite.com/two; 它加载页面并向下滚动到请求的文章）。

当然，在加载完所有内容之后，这很好用，但我的麻烦是目标元素之前的内容尚未加载时。因为元素必须扩展以适应内容，它会下推目标元素，所以不是得到这个：

____________________
| Target Element   |
|                  |
|__________________|
| Next Element     |
|__________________|

你得到这个：

_____________________
| Previous Element  |
|                   |
|                   |
|___________________|
| Target Element    |
|___________________|

我尝试为内容块设置最小高度，但这仅在部分时间有效，并且只有在最终高度接近原始高度时才真正有效。

理想情况下，即使用户在所有内容加载之前滚动，我也希望视口相对于内容保持在相同的位置，但我会在用户尝试滚动之前保持该位置。

有什么办法可以做到这些吗？

4

4 回答 4

0

在这里创建了一个小演示：http: //jsfiddle.net/dS5tq/

看一下这个。

页面加载后尝试向下滚动到第二个 div。

我曾经setTimeout添加更多文本并为文本克隆现有段落。

HTML 代码

<div>
    <div id='one' class='box'>
        <p>um vulputate pretium id nec lorem. Cras ut pharetra massa. Aliquam venenatis ipsum pellentesque lorem viverra eleifend. Pellentesque in<p>
    </div>
    <div id='two' class='box'>
        <p>ger elementum, orci eu tincidunt vehicula, nisl felis semper odio, lacinia elementum risus leo vitae dui. Fusce dictum, justo a consequat ullamcorp<p>
    </div>
    <div id='three' class='box'>
        <p>ce in cursus leo. Integer lorem urna, lacinia mollis libero aliquam, consequat luctus lacus. Mauris pulvinar consequat justo, sed mattis sapien<p>
    </div>
</div>

CSS 代码

* { padding : 0; 
    margin : 0; 
}
.box {
    font-family : Arial;
    border : 1px solid #ccc;
    background-color : #eee;
    padding : 10px 10px 0 10px;
    line-height : 24px;
    margin : 10px;
}
p {
    margin-bottom : 10px;
}
#two {
    background-color : #ece;
}
#three {
    background-color : #eec;
}

JavaScript 代码

$(function() {
    setTimeout(function() {
        addContent($('#one p:last').clone(), $('#one'));
    }, 3000);

    setTimeout(function() {
        addContent($('#one p:last').clone(), $('#three'));
    }, 5000);
});

function addContent(data, tgt) {
    var current_pos = $(window).scrollTop();
    var tgt_pos = $(tgt).offset().top;

    if(tgt_pos < current_pos) {
        var currentHeight = $(tgt).height();
        $(tgt).append(data);
        var newHeight = $(tgt).height();
        $(window).scrollTop(current_pos + newHeight - currentHeight);
    } else {
        $(tgt).append(data);
    }
}

让我知道这是否有帮助。

于 2013-08-06T17:13:29.493 回答
0

将目标设置为绝对定位并将其放在屏幕顶部滚动到它，这实际上是滚动到顶部，然后在重置目标元素的窗口对象上放置一个 on-first-scroll 事件。http://jsfiddle.net/DjBHX/

// get the target element
var target = $("#two");
// set it to absolute position
// now its at the top no matter what
target.css("position", "absolute");
target.css("top", 0);
// scroll to the top of the page / target
window.scrollTo(0, 0);
// fake loading
$("article").each(function() {
    // load $(this).load(blah);
    var elm = $(this)
    var spam = this.id; 
    for(var i=0; i<4; i++)
        spam += spam + "<br>";
    elm.html(spam);
});
// first scroll set target back to static positioning
(function() {
    var fnFirstScroll = function () {
        // remove the event
        $(window).off("scroll", fnFirstScroll);
        // reset the target article
        target.css("position", "static");
        target.css("top", "auto");
        window.setTimeout(function() {
            window.scrollTo(0, target.offset().top);
        }, 10);
    }
    $(window).on("scroll", fnFirstScroll);
})();
于 2013-08-06T17:26:37.220 回答
0

也许看看做一个ajax成功功能：

$.ajax({
  ...
  success: function() {
    // simulate link click or somesuch
  }
});
于 2013-08-06T18:06:19.197 回答
0

那这个呢：

  1. 在 ajax 调用加载之前获取任何先前元素的高度。保存。
  2. if 完成加载后，在 ajax 调用成功完成后，获取新的高度。
  3. 使用差异计算它的大小。
  4. 向上滚动页面。

如果元素在当前元素之后，则不要滚动。

在旁边

这是我对某些网页的不满之一。他们加载，你开始阅读。然后一个 2 英寸高的添加幻灯片将您正在阅读的内容移出页面。或者更糟糕的是，您向下滚动并开始阅读，并且没有明显的原因文本只是从页面底部滑出，因为看不见的添加刚刚加载到上面。

于 2013-08-06T16:53:12.607 回答