I am working on an infinite implementation. At the moment, I am able to scroll down and the code does what it is supposed to do with this check:
if ($(window).scrollTop() > $(document).height() - $(window).height() - 300) {
//do stuff
}
I also need to do stuff when I go forward. The problem I have is that when the page first loads, the scroll bar is at the top of the page, is there an event or a way of knowing the user is scrolling up when the page first loads?
At the moment, the user has to scroll down and then up to trigger the event.
I had the same problem and i used
window.onload = loadSubPage;
Hope it's what you are looking for :)
Related
I want to trigger animations on scroll for bodymovin [JSON] which can be controlled on scroll
i.e forward and reverse as well.
Alfred , Need similar kind of behavior .
Suggestions are welcome , How should I approach this OnScroll events ?
Using jQuery you can bind to the scroll event and then test to see where on the page it is scrolled to.
$(window).scroll(function() {
//This will be how far down the page the user has scrolled
var y = $(window).scrollTop();
//do things here
})
I save current scroll position using the following way:
$(window).on('unload', function() {
if ($(window).scrollTop() != 0) {
localStorage.setItem('lastScrollPosition', $(window).scrollTop());
$(window).scrollTop(0);
}
});
After page reloading I load images and I need to scroll at lastScrollPosition only when all images are loaded. So I call $(window).scrollTop(lastScrollPosition) after all images are loaded, browser scrolls at lastScrollPosition, but after that browser also scrolls at top of page (like $(window).scrollTop(0);), therefore, I get these action: $(window).scrollTop(lastScrollPosition) -> $(window).scrollTop(0)
Could you please advise how to fix my issue?
I found out the reason of the issue. This way works correctly, but a instagram library scrolls to top after my scroll. So this library has strange behavior.
anyone have a clue how to make a sroll effect like this?
http://www.eurekasoft.com
I know the content is repeated at the end to create the illusion but i would like to know how to achieve the seemingly never end scroll.
Thanks!
It appears that site is using Skrollr: http://prinzhorn.github.io/skrollr/
Scroll all the way down for links to the Github and more examples.
Deep down, it is using the function window.scrollTo() to set the scroll position, and probably setting DOM around that area so that it looks the same as where it was scrolled from.
https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L617
This works for me :)
here is the example: http://www.cancerbero.mx (only enable in Chrome and Safari)
// #loop is the div ID where repetition begins
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
var limit = $('#loop').position().top;
if(scroll >= limit){
window.scrollTo(0,1); // 1 to avoid conflicts
}
if(scroll == 0){
window.scrollTo(0,limit);
}
});
});
$(window).scroll(function(){
if(window.reachBrowserBottom) {
alert('browser bottom reached');
}
}
I want to trigger an event when browser scrolling reaches the bottom. To load more content, much like sites like Facebook or Quora do it.
I tried:-
var bottomReached = $(window).height() = $(window).scrollTop();
if(bottomReached) {
...
}
But bottomReached is a bit unpredictable.
Check out this answer. It addresses the same issue.
https://stackoverflow.com/a/3898152/1341823
You need to use the .scroll() event on window.
I'm working on a site that has a splash page and I want it to work so that when you scroll down the splash page, div.splash, will scroll up out of the way and the site scrolls in. I have it working for the most part, there is a just a small annoyance. Depending on how fast you scroll the mouse, it will scroll a certain distance into the main site.
I'd like it to work so that as soon as it detects even one click down on the mousewheel it will do all the stuff below but any additional movement in the mousewheel will be disabled until the slideUp()/animate() function is completed. That way when they scroll, the animations will happen but the person will still start at the very top of the page.
$(window).bind('mousewheel', function(e, delta) {
if(delta == -1){
disable_scroll();
$('.alpha.wrapper').show();
$('.titles .beta').hide();
$('.splash').slideUp(800);
$('.titles').animate({
top: '495px'
},800,enable_scroll());
}
});
By moving the disable_scroll(); call to the document ready you'll be able to disable the user from scrolling as soon as the page loads.
Then, change the above to:
$(window).bind('mousewheel', function(e, delta) {
if(delta == -1){
$('.alpha.wrapper').show();
$('.titles .beta').hide();
$('.splash').slideUp(800);
$('.titles').animate({
top: '495px'
},800,function(){enable_scroll();});