I am using this way to load old content from messages when user scrolls top.
$("#Default3").scroll(function() {
if($("#Default3").scrollTop()<1) {
// load 10 more old data to div
});
});
However, if you scroll to top, it just loads for one time. You need to scroll a little bottom and then scroll top to load 10 more again. So I checked the facebook messaging, and noticed that they load more old content if the scroll is upper than 50% of the height. What is the correct way for doing that ?
You can scroll down one pixel, so the user would be able to scroll up again:
$("#Default3").scroll(function() {
if ($("#Default3").scrollTop() < 1) {
// load 10 more old data to div
$("#Default3").scrollTop(1);
}
});
Related
I'm trying to use selenium to scrape a webpage, and one of my elements dynamically loads a finite amount of content (IE not like twitter where you can just keep scrolling) when I scroll to the bottom of it.
Now I could simply do something like
var scrollbar = document.getElementsByClassName("dataTables_scrollBody")[0]
var last = -1;
var curr = scrollbar.scrollHeight;
while (curr != last) {
last = curr;
scrollbar.scrollTop = curr;
curr = scrollbar.scrollHeight;
}
And in fact, that's what I'm doing. However, the actual load operation on the data table takes so long that this script exits by the time the load finishes, meaning I only ever get halfway down the scrollbar.
What's a good way to make sure that I've scrolled all the way to the bottom of the scroll bar?
This question is different from Scroll to bottom of div? because I don't have access to the raw HTML, and it's different from Scroll Automatically to the Bottom of the Page because my page is dynamically loading content.
Perhaps I could force an ajax load of all the content in the panel, but I don't know how to do that, and I don't want to wade through miles of minified code to figure out how the page owner does it.
Here's an ugly solution:
scroll_elem = document.getElementsByClassName("dataTables_scrollBody")[0];
table_elem = document.getElementsByClassName("dataTable")[0];
function scrollToBottom() {
scroll_elem.scrollTop = scroll_elem.scrollHeight;
};
new ResizeObserver(scrollToBottom).observe(table_elem)
Basically how this works is we have an object watching the element we want to scroll to the bottom of. If and when it resizes, it instantly scrolls to the bottom of the new window. This works well enough, then you could use the sleep function KunduK recommended in comments to wait for the process to complete
I have a scrolling div with some links and I want to store the scrollbar position on click and keep the position after page load. This code does the work but when the new page loads the scrollbar starts at the top and immediately goes to it's stored position.
It works well in Microsoft EDGE, but it doesn't in Chrome.
Is there a way to avoid that? I don't want any scrollbar/content movement on page load.
Here's an example.
$('.sidebar a').click(function() {
sessionStorage.scrollTop = $('.sidebar').scrollTop();
});
if (sessionStorage.scrollTop != "undefined") {
$('.sidebar').scrollTop(sessionStorage.scrollTop);
}
http://jsfiddle.net/xpvt214o/549685/
I am not trying to prevent the fragment identifier from working. I want the page to go back to the top after it goes down.
This question is asked for the purposes of using jQuery's UI tabs. You need the id to be set on the tab content div, so that jQuery knows which tab to open.
The fragment identifier will open the tab that it is set to, but it also scrolls the page down to the tab's content.
On a page with the tab close to the top, and barely any headers, I wish to keep my page at the top, not scroll down ~150 pixels.
Using javascript's onscroll event, we can see when the page scrolls.
Side note - Since I only have one scenario, I verify that my fragment identifier is what it should be.
We need to then keep a count of when the page scrolls. The page should only be set to the top at the beginning, otherwise the user wouldn't be able to scroll. Thus, check the scroll count for 1, and then move the page to the top.
<script type="text/javascript">
var scrollCount = 0;
window.onscroll = function () {
var hash = window.location.hash.substr(1);
if (hash === "chats") {
scrollCount++;
}
if (scrollCount === 1) {
window.scrollTo(0, 0);
}
}
</script>
I've recently taken over work on a friend's website, here. I want to get the small logo above the description box to only show up once the user has scrolled past (and subsequently hidden) the large header at top, and disappear again if the user scrolls back up past it. I've tried the methods recommended in these other posts here and here, which seem like the same basic idea but I can't get any of them to work.
I'm new to anything and everything scripting (which I'm entirely sure is the biggest problem here, I know.) So any help is appreciated as what I'm apparently doing wrong.
Start by giving the <div class="fixeddiv"> a style="display: none". Then add the following (since you're already using jQuery):
$(document).ready(function () {
var contentOffset = getOffset();
function getOffset() {
var allOffsets = $("div#content").offset();
return allOffsets.top;
}
$(window).resize(function () {
contentOffset = getOffset();
});
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop > contentOffset) {
$("div.fixeddiv").show();
} else {
$("div.fixeddiv").hide();
}
});
});
Here's what this code does. When the document is done loading, it gets the number of pixels that the "content" div is from the top of the document (offset). It does this again any time the window is resized. Then, when someone scrolls up or down, it gets the number of pixels that are already hidden above the scroll (scrollTop). If the number of hidden pixels is greater than the offset of the #content div from the top of the window, that means we've scrolled past the top of the content div and should show the icon. Otherwise, we should hide the icon.
I need a script that scrolls automatically throught my page without buttons,I want it to scroll down every 10 seconds and then return to the top when done,how would i do this in javascript?
Thanks,
Lee
You want to use a combination of the jquery scrollTo() plugin and the javascript setTimeout() function. You would do something like (pseudocode):
setTimeout(scrollMyPage, 10000)
{
if (At bottom of the page)
{
scroll To Top
}
else
{
scroll down the height of the browser window/a page
}
}