I've run into a bug/problem when i am trying to use infinity scroll in mobile browsers. I've made a project using vanilla js, and when the scrollbar goes to bottom it calls a function that fetching nextPage from an API( TMDB). Every time scrollbar touches bottom, it returns the next 20 items from the next page. So, in Desktop is all fine, but in mobile browsers, i am going to bottom and nothing happened. I think there is a problem with mobile browser topbar, but how i can fix it? Here is my code:
window.addEventListener("scroll", () => {
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
if (scrollTop + clientHeight >= scrollHeight) {
showLoading();
}
});
I would be appreciate if anyone can give me a hint about it.
Thank you!
Related
I needed JavaScript for automatic scroll down in a smooth/slow manner.
I have a form with many radio buttons which is quite similar to survey form.
I used script from the below mentioned link. This link works fine smoothly for scrolling downwards.
But problem comes when you reach the bottom of page and cannot scroll upwards.
I am not so good in JavaScript. Does anyone here has solution or fix to this?
Link to Stack Overflow thread:
Slow down onclick window.scrollBy
function scrollByRate(y, rate)
{
//calculate the scroll height
var scrolling = Math.max( document.getElementsByTagName('html')[0].scrollTop, document.body.scrollTop);
//save the old value as "static" var
arguments.callee.tmp = arguments.callee.tmp || scrolling + y;
//make a little scrolling step
window.scrollBy(0, (arguments.callee.tmp - scrolling) / rate);
//are we arrived? if no, keep going recursively, else reset the static var
if(arguments.callee.tmp - scrolling > 100) setTimeout(function() { scrollByRate(y, rate); }, 10);
else arguments.callee.tmp = undefined;
}
Scrolling down slowly
I can see your approach having a negative impact on performance. It looks like the browser will block until the target scroll destination has been reached.
My suggestion is to use what is out there for smooth scrolling already. The scrollTo method of any scrollable pane (e.g. window object but also a scrollable div for example) has a "behavior" property that you can set to "smooth", e.g.:
window.scrollTo({
top: 100,
left: 100,
behavior: 'smooth'
});
Keep in mind that the compatibility at the time of writing is limited to Chrome, Firefox, Edge and Opera which means you'll have problems on Internet Explorer and Safari (so all Apple products). I myself use a polyfill to get the smooth scrolling back on my application, this one in particular: https://github.com/iamdustan/smoothscroll
I am trying to detect when the browser has scrolled all the way to the end of a div, to trigger an action when that occurs - add a class to the div divToCheckEndOf
I found a jQuery solution that checks for scrollTop and height of the window and document.
$(window).scroll(function () {
if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - divToCheckEndOf.innerHeight())) {
divToCheckEndOf.addClass('abs');
} else {
divToCheckEndOf.removeClass('abs');
}
});
This code works fine on large desktop resolutions, but it fails on laptop resolutions and mobile devices.
Any feedback appreciated.
Thanks!
Not sure what the issue was here, but I ended up using this good old jquery solution:
if ($(window).scrollTop() > section.height() {
//we are underneath the section
}
I'm having trouble with an animated scrollbar. The intended behaviour should be on clicking the nav-button, scroll with ease to the end of the page(and a little break near the end).
Now the problem on PC works perfect. On android device (I tried my phone), the scrollTop value and the ($(document.body).height() - $(window).height()) do not match. There is exactly 55px less with the scrollTop thus acting all sorts of strange... Also sometimes it works sometimes it doesn't. I've figured it has something to do with the browser bar collapsing and upsetting the value...but i can't figure it out.
I've tried the following: initializing the variables on scroll event, i've tried vanilla js that didn't work. Need help :) for reference http://www.developer.morningmood.org , also i've printed out the values on bottom of the page if it helps. Here's the code.
contactF = Math.floor($(document.body).height() - $(window).height());
$("#cont").click(function(){
if ($(document).scrollTop() < contactF && flagScroll==true){ //flag stops other buttons from beying pushed
flagScroll = false;
var inter = setInterval(function(){
var doc = $(document).scrollTop();
if (doc == contactF){ // this is the final desired position
clearInterval(inter);
flagScroll = true;
pix = 10; //pixels to jump
return;
}
if (doc >= contactF-50){ // this is a break on aproach
pix = 1;
}
$(document).scrollTop(doc + pix);
}, 10);
}
})
EDIT: also to find the bug, you nedd to scroll from the top of the page all the way to the bottom, if from the top of the page you just push the contact button it works. but if you scroll it doesn't, it upsets the value...
Had the same exact problem and spent a whole day to figure it out.
You are right about the address bar collapse on Android chrome messing it up. Turns out the jQuery function $(window).height() always reports the viewport height that is before the address bar collapses. To get the correct value, use window.innerHeight instead. You can find more information about URL bar resizing here https://developers.google.com/web/updates/2016/12/url-bar-resizing
You can also find people asking similar questions regarding the safari address bar auto-hide, the solutions are similar. Mobile Safari $(window).height() URL bar discrepancy
I've created a sticky navbar for a subnav, which should stick at the top of the screen when the user scrolls down. Therefore I've tried some javascript, which changes the position to 'fixed' when the top is reached. Avoiding a gap in the content when the navbar is taken out of the flow, I've also added a placeholder, which has the same height as the navbar.
On Desktop it really works and looks how it should be. But I got a "touch" issue on mobile view. When I scroll down on mobile view the navbar will not appear during the process of scrolling over the viewpoint, where the css class is changing. It only appears when I stop scrolling after that viewpoint. When it shows up I can normally scroll up and down and I am only getting this issue again if I repeat this procedure, where the navbar has to change the css class. So it might be a problem with the css class change and I guess the problem could be in the javascript snippet. Does anybody know a solution for this? I'd like to have the same behavior like on desktop view, so the navbar is always visible and just fixed to the very top of the screen, even if it is in the flow of scrolling.
JS:
var menu = document.querySelector('#irp-localnav');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition.top && !isAdded) {
menu.classList.add('sticky');
menu.parentNode.insertBefore(placeholder, menu);
isAdded = true;
} else if (window.pageYOffset < menuPosition.top && isAdded) {
menu.classList.remove('sticky');
menu.parentNode.removeChild(placeholder);
isAdded = false;
}
});
If you guess an error in the html/css markup, just let me know, so I get in touch with you again by posting this markup
Kind Regards
I was able to hack around. For anyone, who is facing a similiar issue:
Mobile browsers simply do not fire on a scroll event, while the event is in process. They fire when the event has stopped, so, when you've stopped scrolling. Using translate3d(0px,0px,0px) can solve this. Refer to this thread to read more about it:
iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops
Kind Regards!
I am using the following jquery code to scroll to a certain position on the page vertically. This works absolutely fine on all browsers and does not affect the horizontal scroll position, however when i try it on an iphone (on mobile safari) in addition to scrolling to the correct place vertically it also scrolls horizontally all the way to the left. Similarly if i use scrollleft it will go to the correct place horizontally but will return to the top of the page. It works fine on everything else and i cannot find any reference to this problem anywhere, i would be immensely grateful if anyone who's come across this could help me out as i'm stumped! I can't even do one after the other (scrollleft then scrollright) as whichever one i do last will cancel out the scroll positon set by the previous one.
if($.browser.opera)
{
$('html').animate(
{
scrollTop: yscroll - 10
},
1000);
}
else
{
$('html, body').animate(
{
scrollTop: yscroll - 10
},
1000);
}
Thanks so much for your help!
Dave
maybe you could first get the current scrollLeft (or scrollTop if you animate scrollLeft) value and then animate both scrollLeft and scrollTop when the user agents tell you it's an iphone
var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone");
var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad");
var isiPod = navigator.userAgent.toLowerCase().indexOf("ipod");
it's not the best since you will have a different animation, but at least you will end on the same position
there's some issue with iphone/pad iPad / jQuery.animate(scroll) issues