I'm trying to add a smooth scroll that functions properly on all browsers (but only IE11 and Edge for microsoft). The issue is that this script is completely breaking the scroll in Edge browsers.
I've included console logs which confirm that the script is calculating the mousewheel movement, however, there is no "visual" movement of the page.
new SmoothScroll(document, 120, 12);
function SmoothScroll(target, speed, smooth) {
if (target == document) {
target = document.documentElement || document.body.parentNode || document.body; // cross browser support for document scrolling
var moving = false;
var pos = window.pageYOffset;
target.addEventListener("mousewheel", scrolled, false);
target.addEventListener("DOMMouseScroll", scrolled, false);
}
function scrolled(e) {
e.preventDefault(); // disable default scrolling
var delta = e.delta || e.wheelDelta;
if (delta === undefined) {
//we are on firefox
delta = -e.detail;
}
delta = Math.max(-1, Math.min(1, delta)); // cap the delta to [-1,1] for cross browser consistency
pos += -delta * speed;
pos = Math.max(0, Math.min(pos, target.scrollHeight - target.clientHeight)); // limit scrolling
if (!moving) {
update();
}
}
function update() {
moving = true;
var delta = (pos - window.pageYOffset) / smooth;
console.log(window.pageYOffset);
if (window.navigator.userAgent.indexOf("Edge") > -1) {
window.pageYOffset += delta;
}
else {
target.scrollTop += delta;
}
console.log(Math.abs(delta));
if (Math.abs(delta) > 0.5) {
console.log("entered if");
requestFrame(update);
}
else {
moving = false;
}
}
var requestFrame = (function() {
console.log("request frame is triggered");
// requestAnimationFrame cross browser
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(func) {
window.setTimeout(func, 1000 / 50);
}
);
})();}
Why is it not working?
This may be because of the Event Loop.....beacuse in Edge, the questAnimationFrame happens AFTER rendering.
For more info see this excellent talk by Jake Archibald!
https://www.youtube.com/watch?v=cCOL7MC4Pl0
Related
I am using "smoothie charts" http://smoothiecharts.org/.
I'm trying to make the animation stop and restart, but all I can do is freeze the "viewing" image. The animation doesn't really stop. It seems to continue to run in the background?
Once I restart it, the entire chart jumps to actual time.
On "start" I need that animation to resume, from where it was paused.
How can I achieve this?
I'm new with to this and have been trying to figure it out for a week, but i'm stuck on this problem.
This is the code for animation:
SmoothieChart.AnimateCompatibility = (function() {
var requestAnimationFrame = function(callback, element) {
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
return window.setTimeout(function() {
callback(new Date().getTime());
}, 16);
};
return requestAnimationFrame.call(window, callback, element);
},
cancelAnimationFrame = function(id) {
var cancelAnimationFrame =
window.cancelAnimationFrame ||
function(id) {
clearTimeout(id);
};
return cancelAnimationFrame.call(window, id);
};
return {
requestAnimationFrame: requestAnimationFrame,
cancelAnimationFrame: cancelAnimationFrame
};
})();
And here is the original stop...
SmoothieChart.prototype.stop = function() {
if (this.frame) {
SmoothieChart.AnimateCompatibility.cancelAnimationFrame(this.frame);
delete this.frame;
}
};
This is the start function
SmoothieChart.prototype.start = function() {
if (this.frame) {
// We're already running, so just return
return;
}
// Make sure the canvas has the optimal resolution for the device's pixel ratio.
if (this.options.enableDpiScaling && window && window.devicePixelRatio !== 1) {
var canvasWidth = this.canvas.getAttribute('width');
var canvasHeight = this.canvas.getAttribute('height');
this.canvas.setAttribute('width', canvasWidth * window.devicePixelRatio);
this.canvas.setAttribute('height', canvasHeight * window.devicePixelRatio);
this.canvas.style.width = canvasWidth + 'px';
this.canvas.style.height = canvasHeight + 'px';
this.canvas.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
}
// Renders a frame, and queues the next frame for later rendering
var animate = function() {
this.frame = SmoothieChart.AnimateCompatibility.requestAnimationFrame(function() {
this.render();
animate();
}.bind(this));
}.bind(this);
animate();
};
I am trying to animate a video on scroll like the landing page for the new iPhone 6. I have the video animating on scroll, but I am trying to some how ease the the video once the mousewheel has been released. I'm not sure how I should approach this challenge. Should I be trying to use an actual easeOut function? Or should I do it some other way?
Here is a snippet of the JS I currently have. And a live example here.
function easeOut(t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
};
var $win = $(window),
$video = $('video'),
frameRate = 29.97,
target = 0,
scroll = 0,
isTicking, scrollTimeout, delta, target;
var ScrollVideo = function() {
this.scrollY = 0;
$win.on('mousewheel DOMMouseScroll', this.onScroll.bind(this));
};
ScrollVideo.prototype = {
/**
* Callback for our scroll event
* keeps track of the last scroll value
*/
onScroll: function(event) {
var e = event.originalEvent ? event.originalEvent : event; // get original event if available
target += (e.wheelDelta > 0) ? -70 : 70;
if (target < 0) target = 0;
delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
this.requestScrollTick();
},
/**
* Calls rAF if it hasn't already
* been done
*/
requestScrollTick: function() {
if( !isTicking ) {
window.requestAnimationFrame(this.scrollHandler);
}
isTicking = true;
},
/**
* Animate stuff on scroll
*/
scrollHandler: function() {
scroll += (target - scroll) * 0.1;
console.log(scroll);
if(delta < 0) {
$video[0].currentTime += (1 / frameRate);
}
else {
$video[0].currentTime -= (1 / frameRate);
}
// stop ticking
isTicking = false;
}
};
var scrollVideo = new ScrollVideo();
I'd love to be able to tackle this, any help/direction is greatly appreciated.
I'm looking to make something exactly like Facebook's Android app's UX for swiping between News Feed, Friend Requests, Messages, and Notifications. You should be able to "peek" at the next view by panning to the right of left, and it should snap to the next page when released if some threshold has been passed or when swiped.
Every scroll snap solution I've seen only snaps after the scrolling stops, whereas I only ever want to scroll one page at a time.
EDIT: Here's what I have so far. It seems to work fine when emulating an Android device in Google Chrome, but doesn't work when I run it on my Galaxy S4 running 4.4.2. Looking into it a bit more, it looks like touchcancel is being fired right after the first touchmove event which seems like a bug. Is there any way to get around this?
var width = parseInt($(document.body).width());
var panThreshold = 0.15;
var currentViewPage = 0;
$('.listContent').on('touchstart', function(e) {
console.log("touchstart");
currentViewPage = Math.round(this.scrollLeft / width);
});
$('.listContent').on('touchend', function(e) {
console.log("touchend");
var delta = currentViewPage * width - this.scrollLeft;
if (Math.abs(delta) > width * panThreshold) {
if (delta < 0) {
currentViewPage++;
} else {
currentViewPage--;
}
}
$(this).animate({
scrollLeft: currentViewPage * width
}, 100);
});
In case anyone wants to do this in the future, the only way I found to actually do this was to manually control all touch events and then re-implement the normally-native vertical scrolling.
It might not be the prettiest, but here's a fiddle to what I ended up doing (edited to use mouse events instead of touch events): http://jsfiddle.net/xtwzcjhL/
$(function () {
var width = parseInt($(document.body).width());
var panThreshold = 0.15;
var currentViewPage = 0;
var start; // Screen position of touchstart event
var isHorizontalScroll = false; // Locks the scrolling as horizontal
var target; // Target of the first touch event
var isFirst; // Is the first touchmove event
var beginScrollTop; // Beginning scrollTop of ul
var atanFactor = 0.6; // atan(0.6) = ~31 degrees (or less) from horizontal to be considered a horizontal scroll
var isMove = false;
$('body').on('mousedown', '.listContent', function (e) {
isMove = true;
isFirst = true;
isHorizontalScroll = false;
target = $(this);
currentViewPage = Math.round(target.scrollLeft() / width);
beginScrollTop = target.closest('ul').scrollTop();
start = {
x: e.originalEvent.screenX,
y: e.originalEvent.screenY
}
}).on('mousemove', '.listContent', function (e) {
if (!isMove) {
return false;
}
e.preventDefault();
var delta = {
x: start.x - e.originalEvent.screenX,
y: start.y - e.originalEvent.screenY
}
// If already horizontally scrolling or the first touchmove is within the atanFactor, horizontally scroll, otherwise it's a vertical scroll of the ul
if (isHorizontalScroll || (isFirst && Math.abs(delta.x * atanFactor) > Math.abs(delta.y))) {
isHorizontalScroll = true;
target.scrollLeft(currentViewPage * width + delta.x);
} else {
target.closest('ul').scrollTop(beginScrollTop + delta.y);
}
isFirst = false;
}).on('mouseup mouseout', '.listContent', function (e) {
isMove = false;
isFirst = false;
if (isHorizontalScroll) {
var delta = currentViewPage * width - target.scrollLeft();
if (Math.abs(delta) > width * panThreshold) {
if (delta < 0) {
currentViewPage++;
} else {
currentViewPage--;
}
}
$(this).animate({
scrollLeft: currentViewPage * width
}, 100);
}
});
});
I am trying to move an image from side to side using the mousewheel. The image by default is set to absolute position and left=100px. It is not allowing for the scroll to move the image with the parseInt but if I take that out it moves immediately to left=0px. I want to be able to move it a few pixels for each wheel click.
window.onload = function() {
if (document.body.addEventListener) {
document.body.addEventListener("mousewheel", MouseWheelHandler, false);
document.body.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
else document.body.attachEvent("onmousewheel", MouseWheelHandler);
function MouseWheelHandler(e){
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
img1.style.left = Math.max(0, Math.min(1100, parseInt(img1.style.left) + (delta))) + "px";
return false;
}
};
Don't use that event! It's not well supported and could give you headaches.
https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mousewheel
I have made the body of the page 200% tall so that it fits on a screen twice. Using javascript I am making it keep scrolling to the top or bottom when you scroll. For this, I need to find out the lowest scroll point of the page on any browser or screen size so that it stops when it gets there.
No JQuery please.
Thank you.
My code: (it is still being put together so needs a bit of work)
function getScrollXY() {
var x = 0, y = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
// Netscape
x = window.pageXOffset;
y = window.pageYOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
// DOM
x = document.body.scrollLeft;
y = document.body.scrollTop;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
// IE6 standards compliant mode
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
return [x, y];
}
function scrollup() {
if (xy[1] > 0) {
window.scrollBy(0,-100);
setTimeout(scrollup,200);
} else {
null;
}
}
function scrolldown() {
if (xy[1] < ) {
window.scrollBy(0,100);
setTimeout(scrolldown,200);
} else {
null;
}
}
function dothescroll() {
var xy = getScrollXY();
var y = xy[1];
setTimeout(function(){
if (xy[1] > y) {
scrollup();
} else {
scrolldown();
}
},200);
}
This is the cross browser compatible version:
var limit = Math.max( document.body.scrollHeight, document.body.offsetHeight,
document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight );
While this is not part of any specification, you could try window.scrollMaxY.
Returns the maximum number of pixels that the document can be scrolled vertically.
https://developer.mozilla.org/docs/Web/API/Window/scrollMaxY
Fallback if unavailable:
var scrollMaxY = window.scrollMaxY || (document.documentElement.scrollHeight - document.documentElement.clientHeight)
Note, documentElement isn't always the scrolling element (some browsers use body instead). The solution is the new scrollingElement property, which returns a reference to the Element that scrolls the document. It is specified, but still a working draft.
var limit = document.body.offsetHeight - window.innerHeight;
// document.body.offsetHeight = computed height of the <body>
// window.innerHeight = available vertical space in the window
Compare xy[1] < limit
Note: You might need to increase the value by margin and/or padding of the body. You can also try using clientHeight instead of offsetHeight.
My solution based on the solutions above and what I use in 2022.
AKA scrollMaxY
const scrollMaxValue = () => {
const body = document.body;
const html = document.documentElement;
const documentHeight = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
);
const windowHeight = window.innerHeight;
return documentHeight - windowHeight;
};
scrollMaxValue()
window.scrollTo(0, document.body.scrollHeight);
this will work..