I'm having an odd issue that I'm struggling to figure out.
I have a simple, full page, scrolling site where I've tried to mimic position:fixed on certain elements by using jQuery scrollTop to apply a top value when the page is scrolled.
This process works fine in Chrome and FF, but in Safari (desktop and iOS) and also Chrome (Android) the scrolling is very jerky.
I've inspected the code in Safari on desktop and it appears that, unlike Chrome & FF, the scrollTop value isn't being applied to the top until after the scroll has finished, which is causing the jerkiness.
Is this something that can be rectified?
This is the small JS snippet I am using, as well as a link to an example Fiddle
var fullHeight = $(window).height();
$('.panel').height(fullHeight);
$(window).scroll(function () {
var text = $('.text');
var textOffset = text.offset();
var textViewOffset = $(document).scrollTop();
$('.text').css({
'top': textViewOffset
});
$('.panel:nth-child(2) .text').css({
'margin-top': -fullHeight
});
$('.panel:nth-child(3) .text').css({
'margin-top': (-fullHeight) * 2
});
});
Try $(window).scroll(function () { console.log('scrolled'); }); and you'll see that it logs only once in chrome and more often in firefox, that's the problem.
In some old chrome browsers you can enable smoothscroll in the settings.
Use a smoothscroll plugin.
Get rid of $(window).scroll and make a function that fires every 1-2millisecond
Related
I am making a puzzle platformer using html elements as obstacles. Some levels I want to start at the bottom of the document. So I tried using
$(document).ready(function() {
$(document).scrollTop($(document).height() - $(window).height());
}
and
$(document).ready(function() {
window.scrollTo(0, document.body.scrollHeight);
}
they both work perfectly fine in Firefox but neither work in Chrome. I only could get it to work when animating the scroll which will not work for what I am trying to do.
edit: I am not using jQuery.toScroll() I tried vanilla toScroll and jQuery.scrollTop()
Browsers attach their scrollbars to the page differently. Use $('html,body').scrollTop(). You should also use $(window).innerHeight(). Like this...
$('html,body').scrollTop($(document).height() - $(window).innerHeight());
//Or to smooth scroll it
$('html,body').animate({
scrollTop: $(document).height() - $(window).innerHeight()
}, 1000);
Note: $(document).height() will return the same value as $(window).innerHeight() if the document is shorter than the window.
I did not execute full testing but I'm also experiencing the issue via Developer Tools at least on a specific jQuery version and latest Chrome. animate does work. scrollTop and scrollTo do both not work. Nonetheless even if you explicitly said that you not want to use animate I still recommend it as it is working and I see no reason of not using it if you use it like this:
$('html, body').animate({scrollTop: 500}, 0);
This will scroll to 500px and has no animation at all because the duration is set to 0. I also have to point on a previous issue with Chrome:
Possible duplicate
Issue on Github
I know the issue is closed but it might be relevant and probably it should be reported because there is something fishy.
so i have this function for scrolling to an anchor:
function scrolltoancora(id){
var aTag = $("a[name='"+ id +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
and then i have another function for sliding some content that looks like this:
function changecontent(id1,id2) {
var ancora="ancora"+id2;
$(id1).slideUp();
$(id2).slideDown();
scrolltoancora(ancora);
}
what im trying to do is slideup some content then slidedown another content and then scroll to the expanded content.
for some reason firefox works but chrome dose not.
as i understand webkit browsers like chrome needs all elements loaded to get the right offset, i tried to make use of the complete parameter of slideUp/slideDown but with no result.works on ff but not on chrome.
any ideas about how this could be accomplished? thank you.
I' trying to detect when user scroll down bottom of a web page to load show some contents when user scroll to near bottom,
i use below function which works perfectly on all desktop web browsers, but its not worked on mobile browsers.
jQuery(function(){
jQuery(document).scroll(function () {
if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() -100) {
//show contents
alert('near bottom')
}
});
});
this is my working website i applied above http://discount.today/
when scroll down it shows some extra products, it working on normal browsers but not on mobile browsers,
can anyone help me to fix this issue please. i tried lots of solution which is on internet but no luck, thank you
Here is solution
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
alert("bottom detected");
}
add -100 so this will work on mobile
Mobile webs are different then desktop webs. The reason is very simple, The margins and padding are different.
Your website probably doesn't know how to detect that a change has occurred when running on mobile so as far as the web's concern, It didn't reach the bottom.
You need to use CSS 3 maybe or even jquery, to signal the web that a change in platform was made, The site is now smaller and so the bottom of the page.
As for how to do that, I am short in suggestions. This is the general direction though.
This is the solution which will work on every device:
window.onscroll = function() {
var d = document.documentElement;
var offset = d.scrollTop + window.innerHeight;
var height = d.offsetHeight;
console.log('offset = ' + offset);
console.log('height = ' + height);
if (offset >= height) {
console.log('at the bottom');
}
}
I've created a menu that moves to the current window position by scrolling. When I scroll up and down right after, sometimes a glitch appears on Chrome 30 with OS X 10.9 and Windows 7. After hovering, the anchor tag jumps to the right position (1 pixel up). Is there anything wrong with my code? Is this a known bug?
Check this JSFiddle Demo!
$(document).ready(function(){
$(window).scroll(function(){
var newTop = ($(window).scrollTop() + 40) +'px';
$('#menu').stop().animate({ top: newTop}, 500);
});
});
Edit: It's fixed in Chrome 31.
I'm fairly certain this is a rendering bug since:
Manually triggering a repaint causes the glitch to go away.
The glitch doesn't occur in other browsers I tested.
Fortunately, triggering a repaint is a fairly straight-forward workaround, albeit an annoying one:
I added a callback to the animation:
$('#menu').stop().animate({ top: newTop }, 500, function(){
$('#menu').css('overflow', 'hidden');
setTimeout(function(){
$('#menu').css('overflow', 'auto');
}, 10);
});
jsFiddle Demo
Unfortunately, it seems both the setting and unsetting of some property (here I chose overflow) was necessary. The 10 is a little sketchy, but when you're working around a browser rendering bug, I'm not sure you can do much better.
Best of luck!
I agree with Adam, this is definitely a rendering bug. If you animate the menu using the translate() transform-function instead, it does not happen.
There are other bonuses to using this method as well: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
jQuery core does not allow you to animate using translate() out of the box, but there is a plugin that enables this at http://ricostacruz.com/jquery.transit/ , or you can opt for using .css() and let css transitions do the heavy lifting.
Here is an example using the plugin:
var menu = $("#menu");
$(window).scroll(function(){
var newTop = $(window).scrollTop();
menu.stop().transit({ y: newTop +'px' }, 500);
});
Plugin demo at http://jsfiddle.net/Hb3jS/5/
Here is an example using CSS transitions:
js
var menu = $("#menu");
$(window).scroll(function(){
var newTop = $(window).scrollTop();
menu.css({ transform: 'translateY(' + newTop +'px)' });
});
css
#menu {
transition: all .5s;
}
CSS demo at http://jsfiddle.net/Hb3jS/6/
Reasoning for Script:
Reloads various CSS scripts based on browser detected width and height. Window reload in needed to reload the other JavaScript as browser is resizing.
Problems Occurred:
IE likes to loop continuously.
Compatibility with other scripts:
Chrome, FireFox, Safari work
Script used:
<body onResize="window.location.href = window.location.href;">
Someone please come up with a better solution or suggestion!! This has to work for Safari, IE, and FireFox.
Possibly else if logic based on what type of browser?
SOLUTIONS BELOW (JQUERY): window.resize event firing in Internet Explorer
$(document).ready(function(){
var winWidth = $(window).width(),
winHeight = $(window).height();
$(window).resize(function(){
onResize = function() {
//The method which sets the LEFT css property which triggers
//window.resize again and it was a infinite loop
setWrapperPosition($mainWrapper.parent());
}
//New height and width
var winNewWidth = $(window).width(),
winNewHeight = $(window).height();
// compare the new height and width with old one
if(winWidth!=winNewWidth || winHeight!=winNewHeight)
{
window.clearTimeout(resizeTimeout);
resizeTimeout = window.setTimeout(onResize, 10);
}
//Update the width and height
winWidth = winNewWidth;
winHeight = winNewHeight;
});
});
I'd use:
window.location.reload()
to reload the page.
Also, I'm not sure if onresize is a widely-supported event.
Instead, I'd do it with a timer (source here http://jsfiddle.net/ACpTm/4/)
But I REALLY would not advise anyone to reload the page due to styling. It's a bad practice and the user dislikes it, especially if they have limited bandwidth.
Could you describe why you need to do this? We could provide a more versatile solution instead of this.
You would be way better off if you didn't base your CSS on the browser size.
You could use Javascript/jQuery to resize things in the window onResize event, I had to do this once in the past and it worked ok.