以新内容

Question

用户正在查看蓝色内容并使用它执行某些操作。然后进行AJAX调用，并在页面顶部添加一些新的橙色内容。但由于蓝色内容已经位于页面顶部，因此蓝色内容必须向下移动以适应新的橙色内容。

我希望能够强制蓝色内容保持原样，并让窗口向上推橙色+窗口。

我是否充分解释了自己？我会用Google搜索，但我甚至不知道从哪里开始搜索关键字。

Answer 1

假设您有一个内容包装器（让我们说<div>）和＆＃34;蓝色内容＆＃34;在包装器中包装它自己的容器，你想要进行AJAX调用，存储＆＃34;橙色内容＆＃34;在变量中，然后使用内容包装器上的prepend()方法将新内容作为第一个子项插入＆＃34;蓝色内容＆＃34;。

一个简单的例子：

<div class="wrapper">
  <div id="blue-content">
    <p>This is blue content</p>
  </div>
</div>

//save your AJAX result into a variable to use
var ajaxResult;
var $orangeContent = '<div id="orange-content">' + ajaxResult + '</div>';
$('div.wrapper').prepend($orangeContent);
$('body,html').animate({scrollTop:$orangeContent.offset().top}, 'slow');

这很可能全部在一个函数中，因此它按顺序执行，但这取决于你如何实现它。您将看到我添加了animate()位，以便一旦将其添加到包装器中，窗口将滚动到橙色内容。

这是一个非常基本的例子，但应该引导你朝着正确的方向前进。

祝你好运！

Answer 2

您可以通过添加橙色元素的高度滚动来实现此目的。为此：

• 使用window.scrollBy()滚动窗口。
• 使用outerHeight()获取元素的高度。

这是一个演示（我添加了一堆模拟内容，因此滚动可用）：

＆＃13;

＆＃13;

function addOrange() {
    // here you would do the AJAX call and get the orange content
    var orange = '<p id="orange">And I am orange!</p>';
    $("#blue").before(orange);
    window.scrollBy(0, $("#orange").outerHeight());
}

＆＃13;

* { margin:0; padding:0; border:0; }
button { background:#4488cc; padding:8px 16px; color:white; }
#blue { color:blue; }
#orange { color:orange; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p id="blue">I am blue</p>
<p><button onclick="addOrange()">Add text with AJAX</button></p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>
<p>Mock text, just for filling...</p>

＆＃13;

＆＃13;

＆＃13;

上述解决方案的一个问题是，如果没有滚动操作，它就无法工作（例如：元素位于屏幕顶部而其余内容未填写屏幕）。

一种解决方法是向身体添加margin-bottom以补偿这一点。像这样：

＆＃13;

＆＃13;

function addOrange() {
  
    // add margin to the body to force scrolling if there isn't enough content to scroll
    if ($("html").height() < $(window).innerHeight()) {
        $("body").css("margin-bottom", $(window).innerHeight() );
    }
    
    // here you would do the AJAX call and get the orange content
    var orange = '<p id="orange">And I am orange!</p>';
    $("#blue").before(orange);
    window.scrollBy(0, $("#orange").outerHeight());
}

＆＃13;

* { margin:0; padding:0; border:0; }
button { background:#4488cc; padding:8px 16px; color:white; }
#blue { color:blue; }
#orange { color:orange; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="blue">I am blue</p>
<p><button onclick="addOrange()">Add text with AJAX</button></p>

＆＃13;

＆＃13;

＆＃13;

您也可以在此JSFiddle上看到它。