将不断增长的页面滚动到底部

本文关键字：滚动 底部 不断增长 | 更新日期: 2023-09-27 18:22:09

我有一个页面。当我手动滚动它时，它会增长，然后我可以一次又一次地滚动它，直到滚动到底部（一个很好的例子是facebook的时间线页面）。

我试着写：

static IWebDriver driver = new ChromeDriver(@"C:'selenium'net40");
IJavaScriptExecutor js = driver as IJavaScriptExecutor;

然后我输入了一个页面并做了：

js.ExecuteScript("window.scroll(0, document.height)");

但我可以滚动更多。

即使页面在增长，我如何才能滚动到底部？

感谢您的帮助！

将不断增长的页面滚动到底部

window.scroll(0, document.height)将滚动到已知的可滚动区域。问题是，当你到达页面底部时，会下载更多的数据。因此，可滚动区域发生了变化。您需要根据需要滚动多次。

例如，使用这个脚本

var timeId = setInterval( function() {
    if(window.scrollY!==document.body.scrollHeight)
        window.scrollTo(0,document.body.scrollHeight);
    else
        clearInterval(timeId);
},500);

编辑：

在某些页面上，window.scrollY永远不会等于document.body.scrollHeight，因此永远不会清除setIntervall：这将阻止您转到顶部。

var timeId = setInterval( function() {
    if(window.scrollY<(document.body.scrollHeight-window.screen.availHeight))
        window.scrollTo(0,document.body.scrollHeight);
    else
    {
        clearInterval(timeId);
        window.scrollTo(0,0);
    }
},500);

不幸的是，当页面的总高度发生变化时，没有触发任何事件。因此，有两种可能的解决方案：

您可以使用计时器在每个间隔"盲目"滚动到底部。

setInterval(function () { window.scroll(0, document.height); }, 100);

或者，每次高度变化时，您可以使用"DOMSubtreeModified"事件滚动到底部。每当文档中的任何内容发生更改时，都会触发此事件，因此如果您频繁更改DOM，它可能会减慢浏览器的速度。然而，这个解决方案将保证您在页面增长时立即滚动到底部。

//scroll to bottom when anything changes in the dom tree.
var height = document.height;
document.addEventListener('DOMSubtreeModified', function () {
    if (document.height != height) {
        height = document.height;
        window.scroll(0, height);
    }
});

我同意这个目标，但从用户的角度来看，我不同意建议的代码方法。如果我进入一个页面，设计需要部分使用ajax（或任何其他方法）加载所有内容，我希望页面能安静地加载，而不会出现不需要的滚动。因此，最好的方法是在后台一个接一个地进行调用，只要有更多的内容要加载。如果您同意此解决方案，那么通常情况下，您将需要window.onload事件的函数来进行第一次调用、处理响应并调用自身以获取更多内容。

以下两个函数将在加载新内容时强制页面滚动：

JS:

var attachScrollModified = function () {
    document.addEventListener('DOMSubtreeModified', function () {
        this.removeEventListener('DOMSubtreeModified', arguments.callee, false);
        window.scroll(0, getBottomElemPos());
        attachScrollModified();
    });
}
var getBottomElemPos = function () {
    var scrollElem = document.getElementById("scrollElem");
    if (scrollElem) {
        document.body.removeChild(scrollElem);
    }
    scrollElem = document.createElement("div");
    scrollElem.id = "scrollElem";
    document.body.appendChild(scrollElem);
    return scrollElem.offsetTop;
}

示例位于：http://jsfiddle.net/MaxPRafferty/aHGD6/

将它们放在页面上的<script>中，然后调用：

js.ExecuteScript("attachScrollModified();");

也就是说，这可能会导致不断ajax处理更多内容的无限循环。

相关文章：