Scroll the growing page to the bottom.

Question

I have a page. when I scroll it manually, it grows, and then I can scroll it again and again until the scroll reaches the bottom border (a good example is the Facebook timeline page).

I am trying to write:

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

then I entered the page and did:

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

but I can scroll more.

how can i get it to scroll the bottom even if the page is growing?

any help appreciated!

Answer 1

window.scroll(0, document.height) will scroll to a known scroll area. The problem is that more data loads when you reach the bottom of the page. Thus, the scrollable area changes. You need to scroll as many times as needed.

for example use this script

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

EDIT:

On some pages, window.scrollY will never be equal to document.body.scrollHeight , so setIntervanl will never be cleared: this will not allow you to jump to the beginning.

 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); 

Answer 2

Unfortunately, there is no event that fires when the total page height changes. Therefore, there are two possible solutions:

You can use the timer to blindly scroll down to each interval.

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

Or you can scroll the bottom every time the height changes using the "DOMSubtreeModified" event. This event is fired every time something changes in the document, so it can slow down your browser if you change the DOM frequently. This solution, however, ensures that you scroll down the page instantly when the page grows.

 //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); } }); 

Answer 3

I am fine with the goal, but not with the proposed code approaches from the user's point of view. If I land on a page where there is a design, it is necessary to partially download all the content using ajax (or any other method), I will expect the page to do this silently, without bothering me with unwanted scrolling. Therefore, the best approach is to make calls in the background one by one, since the load is more on the content. If you agree with this decision, then in general you will need a function for the window.onload event to make the first call, process the answer, and call yourself for more content.

Answer 4

The following two functions will make your page scroll when loading new content:

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; } 

Example: http://jsfiddle.net/MaxPRafferty/aHGD6/

put those in <script> to your page, and then call:

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

However, this can lead to an endless loop of continuously adding more content.