Question

提交后代码已经滚动到底部，但是当页面更新时滚动条不会更新。

以下是我希望滚动条的行为方式：

1）滚动条从div的底部开始。 2）只有在更新 php文件中的内容之前位于div的底部时，滚动条才会滚动到div的底部。 3）如果在 php文件中对内容进行更新之前不在div的底部，滚动条不会滚动到div的底部。

我搜索了谷歌，并在这里寻找一种方法来实现这一点，但我发现的东西在我的情况下对我不起作用。

这是div的代码：

<div id="div1" style="position: absolute; width: 70%; height: 80%; overflow-y: auto; right: 0px; top: 0px;" >
<?php include ('content.php'); ?>
</div>

这是javascript的代码：

 $(document).ready(function() {
        $('#msg').ajaxForm({
            target: '#message',
            success: function() {
$("#msg")[0].reset();
$("#div1").animate({ scrollTop: $("#div1")[0].scrollHeight}, 1000);
            $('#message').fadeIn('slow');
            }
        });
    });

Answer 1

要检测滚动条位于底部，您可以使用以下

function isScrolledToBottom(el) {
    return el.scrollTop == el.scrollHeight - el.clientHeight;
}

以下是

的示例

Div开始向下滚动
添加内容时，会检查div是否在更新内容之前完全向下滚动
如果它已滚动到底部，则在更新后再次滚动

var div  = document.getElementById('content');
// Set it to go the bottom initially
scrollToBottom(div);

document.querySelector('button').addEventListener('click', function() {
    var wasAtBottom = isScrolledToBottom(div);
    var scrambledText = div.innerHTML.split('').sort(function() {
        return Math.random() - .5
    }).join('');
    div.appendChild(document.createTextNode(scrambledText));
    if (wasAtBottom) {
        scrollToBottom(div);
    }
});

function isScrolledToBottom(el) {
    return el.scrollTop == el.scrollHeight - el.clientHeight;
}

function scrollToBottom(el) {
    el.scrollTop = el.scrollHeight - el.clientHeight;
}

#content {
    height: 150px;
    overflow: scroll;
}

<div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus imperdiet venenatis. Etiam lorem nisi, ullamcorper nec neque non, ultrices elementum lectus. Ut dapibus venenatis quam sit amet imperdiet. Proin scelerisque, nunc vitae ultricies aliquam, diam ligula venenatis purus, id egestas elit turpis sit amet velit. Suspendisse facilisis vel arcu eget hendrerit. Donec non nunc aliquam, finibus ante vitae, venenatis dolor. Suspendisse pulvinar fermentum rhoncus. Proin pulvinar lectus et purus consectetur rutrum.  Phasellus rutrum dolor risus, non consectetur erat posuere eget. Etiam viverra congue laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet ullamcorper finibus. Nulla ac vehicula risus. Phasellus nec fermentum quam. Donec blandit ornare ipsum ut dignissim. Etiam nec velit maximus, mollis nibh id, elementum nisi. Donec arcu nisi, sollicitudin sit amet metus sed, aliquet convallis eros. Sed lacus metus, aliquet sed sodales vitae, rutrum sollicitudin dolor. Nunc dictum, mi id egestas luctus, mi erat finibus enim, a imperdiet orci est ac elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Sed dignissim viverra finibus. Ut quis nulla a sapien bibendum sodales at ut nunc. Etiam volutpat ante varius tellus vulputate blandit. Aliquam turpis purus, efficitur vel lacus imperdiet, viverra auctor nisl. Aenean nunc est, tempus nec tincidunt in, malesuada in mauris. Nam dui risus, maximus et placerat in, elementum tristique leo. Fusce quis viverra enim. Curabitur congue fringilla accumsan. Curabitur vehicula aliquet malesuada. Aliquam pharetra ante vel nulla elementum, sit amet auctor mi porttitor. Mauris id varius leo. Vestibulum ac dolor id ligula iaculis aliquam. Donec porta euismod quam, eu sollicitudin nisi interdum egestas. Vestibulum et ligula velit. Nulla vel iaculis purus. Integer et est ut ipsum fringilla rhoncus. Aliquam auctor eu arcu rhoncus maximus. Sed vulputate, ipsum nec tempus sodales, neque leo hendrerit elit, a faucibus nisl ex nec lorem. Praesent varius dictum felis, sed sollicitudin diam tempor vitae. Mauris tempus justo non egestas mollis. Etiam congue odio eget velit vulputate, sit amet pharetra nulla faucibus. Cras a lorem sed ante imperdiet dapibus id blandit risus. Pellentesque nec tincidunt lacus.</div>

<button>Add content</button>

当div中的内容更新时，最简单的方法是将div滚动条保留在底部？

1 个答案: