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');
}
}
Related
For a parallax-effect, I created a simple script in native Javascript, but it seems to fail somewhere I can't see. That's why I already added the requestAnimationFrame-functionality, but it doesn't seem to really help.
My relevant code is as follows:
var $parallax, vh;
$(document).ready(function() {
$parallax = $('.parallax');
vh = $(window).height();
$parallax.parallaxInit();
});
$(window).resize(function() {
vh = $(window).height();
$parallax.parallaxInit();
});
$.fn.parallaxInit = function() {
var _ = this;
_.find('.parallax-bg')
.css('height', vh + (vh * .8) );
}
//call function on scroll
$(window).scroll(function() {
window.requestAnimationFrame(parallax);
});
var parallaxElements = document.getElementsByClassName('parallax'),
parallaxLength = parallaxElements.length;
var el, scrollTop, elOffset, i;
function parallax(){
for( i = 0; i < parallaxLength; i++ ) {
el = parallaxElements[i];
elOffset = el.getBoundingClientRect().top;
// only change if the element is in viewport - save resources
if( elOffset < vh && elOffset + el.offsetHeight > 0) {
el.getElementsByClassName('parallax-bg')[0].style.top = -(elOffset * .8) + 'px';
}
}
}
I think it's weird that this script by Hendry Sadrak runs better than my script (on my phone) while that is not really optimised, as far as I can tell.
Update: I checked if getBoundingClientRect might be slower in some freak of Javascript, but it's about 78% faster: https://jsperf.com/parallax-test
So here is the downlow on JS animations on mobile devices. Dont rely on them.
The reason is that mobile devices have a battery and the software is designed to minimize battery load. One of the tricks that manufacturers use (Apple does this on all their mobile devices) is temporarily pause script execution while scrolling. This is particularly noticeable with doing something like parallax. What you are seeing is the code execution - then you scroll, it pauses execution, you stop scrolling and the animation unpauses and catches up. But that is not all. iOS uses realtime prioritization of the UI thread - which means, your scrolling takes priority over all other actions while scrolling - which will amplify this lag.
Use CSS animation whenever possible if you need smooth animation on mobile devices. The impact is seen less on Android as the prioritization is handled differently, but some lag will likely be noticeable.
Red more here: https://plus.google.com/100838276097451809262/posts/VDkV9XaJRGS
I fixed it! I used transform: translate3d instead, which works with the GPU instead of the CPU. Which makes it much smoother, even on mobile.
http://codepen.io/AartdenBraber/pen/WpaxZg?editors=0010
Creating new jQuery objects is pretty expensive, so ideally you want to store them in a variable if they are used more than once by your script. (A new jQuery object is created every time you call $(window)).
So adding var $window = $(window); at the top of your script and using that instead of calling $(window) again should help a lot.
I need to disable scrolling for a specific DIV only for mobile devices
if mobile scrolling disabled
else scrolling on
$(function() {
var offset = $('#sidebar-wrapperleft').offset();
var topPadding = 0;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$('#sidebar-wrapperleft').stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else{
$('#sidebar-wrapperleft').stop().animate({
marginTop: 0
});
};
});
});
You need to be aware that "mobile detection" is something that can cause you some headache. If possible, you should rely on screen dimensions to adapt your content.
Mobile detection is problematic because, first of all, what should be considered mobile? Is an iPad mobile or not? As you can see, there are some gray areas in this concept.
There is another thread here (What is the best way to detect a mobile device in jQuery?) where you can find some algorithms based on Browser Agent, and they probably need constant improvement as soon new devices come to market.
I have a website page and I've added to the body of the page touch events.
More exactly for swipe right and swipe left. Since the event listener is added to the body of the page and I have added event.preventDefault(); i can't scroll the page any more.
How can i scroll the page in the browser ?
P.S. The code is pure javascript / library agnostic.
Edit #1. This site viewed in mobile seems to do it http://swipejs.com/ . It slides the tabs right to left and back as well as scroll the website. I just can't seen in the code how :(
Use iscroll plugin. it's help to you.
see example : http://cubiq.org/dropbox/iscroll4/examples/simple/
Unfortunately there is no easy answer. The best way is to build smart gesture recognizers. Or use something like this (for Safari Mobile):
http://mud.mitplw.com/JSGestureRecognizer/#single-gesture
You will notice that when you are touching a gesture recognizer, there is no scrolling. However, you could make the callback of a recognizer scroll the page.
Wondering why it only says it supports Safari mobile? That's because Safari mobile has its own set of touch events. However, you can use it as a start and try to add support for other platforms.
I have the same problem that swiping without "preventDefault()". Because I want to achieve a pulltorefresh's effect, I can only prevent the pulldown event but not pullup. The code like this:
function touchBindMove(evt){
//evt.preventDefault();
try{
var deviceHeight = window.innerHeight;
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
if((y - offsetStart) > 0 && document.body.scrollTop == 0){
evt.preventDefault();
var page = document.getElementsByClassName('tweet-page')[0];
var rate = 0;
end = x;
offsetEnd = y;
rate = (offsetEnd - offsetStart) / (2 * deviceHeight);
//tool.print(rate);
easing.pullMotion(page, rate);
}
}catch(e){
alert(e.message);
}
}
"y - offsetStart" judges whether the event is pulldown and "document.body.scrollTop == 0" judges the scrollbar is in the middle or not.
Maybe it can help you a little bit.
I need to calculate the end of scrolling on web page so that i can make an Ajax call.
I have searched posts in stackoverflow, but the solutions didn't worked for me.
I am using the below code ion order to determine that:
$(window).scrollTop() == $(document).height() - $(window).height()
but the above condition fails and am not able to get to know when page scroll ends.
As the values don't match on L.H.S and R.H.S the condition fails.
Just in order to check i used:
$(window).scrollTop() == $(document).height() - $(window).height() - 13
which works for chrome and firefox but fails for IE.
I need a concrete solution and don't want to hard code values.
Please help me in getting it right.
EDIT: To be specific, i am trying to calculate the end of vertical scroll bar.
Here is what I would do:
$(window).on('scroll', function() {
if($(window).scrollTop() != 0)
{
if( $(window).height() + $(window).scrollTop() >= $(document).height() )
{
//YES, I AM EXACTLY AT THE END OF THE SCROLL, PLZ FIRE AJAX NOW
}
}
});
CAUTION: Be very careful about having negative top margins though for styles in any of your elements on the page!! it may offset the calculation!
to calculate the end of scroll, try scrollHeight property.
This should retrieve the page height for you (not using jQuery but javascript instead):
var height = document.body.clientHeight;
You will find that this is the best cross-browser solution to your problem.
Here's how you do it. You take the scrolled distance and add the window height, then check if they equal the document height :
$(window).on('scroll', function() {
if (($(this).scrollTop() + $(this).height()) - $(document).outerHeight(true) >= 0) {
alert('Scrolled to bottom');
}
});
FIDDLE
This works for me in all five browsers!
I'm working on a jquery-mobile app and have run into a bit of an issue; I'd like to use jquery's animate() for a gentle scroll "back to top" of my app's pages.
The following code snippet works great in all but one of my test browsers. Chrome & Firefox on desktop, Safari on iPhone, and Firefox Beta on Android are all good. The default Android Browser (webkit-mobile IIRC) scrolls back to the anchor when the animation is complete.
$("a[href='#top']").live('click', function() {
$("body").animate({ scrollTop: 0 }, "slow", function() {
// anim complete
setTimeout(function() { // not needed, attempt to brute-force
window.scrollTo(0,0);
alert('foo'); // <- Android scrolls back to anchor after showing alert
}, 50);
});
});
Can anyone suggest a) what's causing the Android Browser to scroll back and/or b) suggest a workaround? If it makes a difference the device I'm testing with at the moment is running Android 2.3.2.
Reading through the documentation on an unrelated issue, I stumbled upon the $.mobile.silentScroll() method - designed apparently for just this situation.
Here's my initial brain-dead workaround:
function scrollToTop() {
var scrollPos = $(document).scrollTop();
scrollPos -= 60;
if (scrollPos < 1) { scrollPos = 1; }
$.mobile.silentScroll(scrollPos);
if (scrollPos > 1) { setTimeout(scrollToTop, 60); }
}
$("a[href='#top']").live('vclick', function() {
scrollToTop();
return false;
});
Still curious as to why Android Browser wants to scroll back to the anchor in the original form.