I made my own sidescrolling parallax using jQuery and the mousewheel plugin. It's working great so far except for the fact that when I change directions of the scroll, it jitters first before actually scrolling (as though it's scrolling one unit to the previous side before actually moving to the correct one). I've tried adding a handler for this which supposedly stops the scroll completely.
Here is my script so far:
var scroll = 0; // Where the page is supposed to be
var curr = scroll; // The current location while scrolling
var isScrolling = false; // Tracker to check if scrolling
var previous = 0; // Tracks which direction it was previously
var loop // setInterval variable
function parallax() {
isScrolling = true;
// Loops until it's where it's supposed to be
loop = setInterval(() => {
if ( curr - scroll == 0 ) {
clearInterval(loop);
isScrolling = false;
return;
}
// Move the individual layers
$('.layer').each(function() {
$(this).css('left', -curr * $(this).data("speed"));
});
// Add/subtract to current to get closer to where it's supposed to be
curr += (scroll < curr) ? -0.5 : 0.5;
}, 25);
}
$(document).ready(() => {
$('.scrolling-container').mousewheel((e, dir) => {
e.preventDefault();
// If the speed's magnitude is greater than 1, revert it back to 1
if ( Math.abs(dir) > 1) {
dir = Math.sign(dir);
}
// If the direction changes, stop the current animation then set scroll to where it currently is
if ( previous !== dir ) {
previous = dir;
isScrolling = false;
scroll = curr;
clearInterval(loop);
}
// If not at the left most scrolling to the left, add to scroll
if ( scroll - dir >= 0 ) scroll -= dir;
// Call parallax function if it's not yet running
if ( !isScrolling ) {
parallax();
}
})
})
I think it's easier to show so here's a codepen of the functional parts: https://codepen.io/ulyzses/pen/yLyoYZm
Try scrolling for a while then change direction, the jittery behaviour should be noticeable.
Related
I have a Wordpress site that has been behaving awesomely... until I looked at it today and it won't scroll, and the menu won't work.
Here is the URL...
Thunderbox Entertainment
I am looking at it in Chrome, and I can't scroll down with my mouse wheel, and the menu items do nothing when I click on them. I haven't touched it, and it was working fine last week.
If I move my mouse to the far right, a vertical scroll bar appears and I can use that to scroll...
It also seems to work fine in Chrome on my iPad.
A bit of research tells me that this is caused by Chrome v61 updating the way it handles scrolling.
The code could be broken in multiple places, but here is an example that I suspect no longer works...
// Quick scrolling to content
// ...................................................................
$fullSlider.data('scrolling', false);
var autoScrollTime = 650,
scrollEasing = 'easeInOutQuart',
pos = false;
// DOMMouseScroll = Mozilla, onmousewheel = IE, mousewheel = everything else
$('body').on('mousewheel onmousewheel DOMMouseScroll', function(e) {
e = e.originalEvent || window.event; // Get the event
wheelData = e.detail ? -e.detail : e.wheelDelta / 40; // Wheel data for different browsers
contentStart = $('#AfterSlider').offset().top - wpAdminbar; // beginning of page content
pos = Math.round(contentStart - $(document).scrollTop()); // Distance from top padder
screenWidth = $(window).width(); // Only use on large screens
if ($fullSlider.data('scrolling')) {
return false; // disable wheel
} else {
if (screenWidth < 768 || window.mobilecheck())
return true; // do nothing on small screens
if (wheelData < 0 ) {
//scroll down
scrollDir = 'down';
// Auto scroll to content
if ( pos > 20 ) {
$fullSlider.data('scrolling', 'down'); // mark as active
// Scroll to position
$.scrollTo( contentStart, autoScrollTime, {
easing: scrollEasing,
onAfter: function() { $fullSlider.data('scrolling', false); } // mark complete
});
return false; // disable wheel (smoother effect)
}
} else {
//scroll up
scrollDelta = (scrollDir != 'up') ? 0 : scrollDelta; // reset delta on direction change
scrollDir = 'up';
// Auto scroll to slideshow
if ( pos >= -1 ) {
$fullSlider.data('scrolling', 'up'); // mark as active
// Scroll to position
$.scrollTo( 0, autoScrollTime, {
easing: scrollEasing,
onAfter: function() { $fullSlider.data('scrolling', false); } // mark complete
});
return false; // disable wheel (smoother effect)
}
// Hard stop at content top
scrollDelta = (scrollDelta < 620) ? scrollDelta + (wheelData * 45) : scrollDelta; // should be (wheelData * 40) but we're being conservative
scrollEndPos = pos + scrollDelta;
if ( pos < -1 && (pos > -120 || scrollEndPos > -160) ) {
$fullSlider.data('scrolling', 'top'); // mark as active
jQuery.scrollTo.window().stop(true);
// Scroll to position
$.scrollTo( contentStart, 455, {
easing: 'easeOutBack',
onAfter: function() {
$.scrollTo( contentStart, 1); // make sure it hit the target
setTimeout( function() { $fullSlider.data('scrolling', false); }, 135); // mark complete
}
});
return false;
}
}
}
});
Thanks for your help!
Dan
"The custom scrolling (scrollbars) is an optional setting. If you think it might cause problems on your site you can turn it off from the admin settings and return to the browser’s default scrolling. As far as we know (and from the thousands of installs of the theme) there is no problem with the custom scrolling in Chrome. If there were, you could always disable it."
I read this comments in support section of theme you are using.
Hope that it will help you.
Thanks
I want to make a JS function.
It will work like this :
If I use my Mouse Wheel to Scroll Down so my variable will decrement. And if I use my Mouse Wheel to Scroll Up my variable will increment
I want to put that in a Condition with a max and min number.
I will send you a screenshot of my website and you will understand
So like you see, I need to make it work without scrollbar. I've only one page in 100vh.
I've make something very bad but you will understand the idea
https://jsfiddle.net/tuzycreo/
i= 1;
if (i>0 && i<5) {
//if(MouseScrollUp)
//i++;
document.querySelector('.number').innerHTML = i;
//else if(MouseScrollDown)
//i--;
// document.querySelector('.number').innerHTML = number;
}
Thanks you guys !
You can try like this,
var scrollCount = 0,
latestScrollTop = 0,
doc = document.documentElement,
top = 0;
// Bind window scroll event
$(window).bind('scroll', function (e) {
top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
if (latestScrollTop < top) {
// Scroll down, increment value
scrollCount += 1;
} else {
// Scroll up, decrement value
scrollCount -= 1;
}
// Store latest scroll position for next position calculation
latestScrollTop = top;
});
I make something that is working for me
https://jsfiddle.net/u93c9eth/2/
var scrollCount = 1;
window.addEventListener('mousewheel', function(e){
if(e.wheelDelta<0 && scrollCount<5){
scrollCount++;
}
else if(e.wheelDelta>0 && scrollCount>1){
scrollCount--;
}
document.querySelector('.number').innerHTML = scrollCount;
});
I have a situation where, for example, if a user's scroll will result in a 1000 px change in scrollTop I'd like to know ahead of time.
The perfect example is iCalendar's control over a user's scroll. No matter how hard you scroll in the iCalendar application, the farthest you can scroll is to the next or previous month.
I currently have a very hackish solution to limit scroll behavior, which only takes into account where the user's scroll currently is.
MyConstructor.prototype._stopScroll = function(){
//Cache the previous scroll position and set a flag that will control
//whether or not we stop the scroll
var previous = this._container.scrollTop;
var flag = true;
//Add an event listener that stops the scroll if the flag is set to true
this._container.addEventListener('scroll', function stop(){
if(flag) {
this._container.scrollTop = previous;
}
}.bind(this), false);
//Return a function that has access to the stop function and can remove it
//as an event listener
return function(){
setTimeout(function(){
flag = false;
this._container.removeEventListener('scroll', stop, false);
}.bind(this), 0);
}.bind(this);
};
This approach works, and will stop a scroll in progress, but it is not smooth and I'd love to know if there's a better way to accomplish this.
The key to this question is can I know ahead of time where a scroll will end up. Thanks!!!
Edit: Just found the following project on github:
https://github.com/jquery/jquery-mousewheel
I tried the demo and it's able to report my touchpad and mouse scroll speed. Also it able to stop scrolling without any position fixed hacks :D
I'll have a look in the next few days and see if I can write anything that reports scroll speed, direction, velocity, device etc. Hopefully I'm able to make some jquery plugin that can override all scrolling interaction.
I'll update this post when I've got more info on this subject.
It's impossible to predict where a mouse scroll will end up.
A touchscreen/touchpad swipe on the other hand has a certain speed that will slow down after the user stopped swiping, like a car that got a push and starts slowing down afterwards.
Sadly every browser/os/driver/touchscreen/touchpad/etc has it's own implementation for that slowing down part so we can't predict that.
But we can of course write our own implementation.
We got 3 implementations that could be made:
A. Direction
B. Direction and speed
C. Direction, speed and velocity
iCalender probably uses implementation A.
Implementation A:
Outputs scroll direction to console, user is able to scroll +/- 1px
before the direction is detected.
Demo on JSFiddle
Demo with animation on JSFiddle
(function iDirection() {
var preventLoop = true;
var currentScroll = scrollTop();
function scroll() {
if(preventLoop) {
//Get new scroll position
var newScroll = scrollTop();
//Stop scrolling
preventLoop = false;
freeze(newScroll);
//Check direction
if(newScroll > currentScroll) {
console.log("scrolling down");
//scroll down animation here
} else {
console.log("scrolling up");
//scroll up animation here
}
/*
Time in milliseconds the scrolling is disabled,
in most cases this is equal to the time the animation takes
*/
setTimeout(function() {
//Update scroll position
currentScroll = newScroll;
//Enable scrolling
unfreeze();
/*
Wait 100ms before enabling the direction function again
(to prevent a loop from occuring).
*/
setTimeout(function() {
preventLoop = true;
}, 100);
}, 1000);
}
}
$(window).on("scroll", scroll);
})();
Implementation B:
Outputs scroll direction, distance and average speed to console, user is able to scroll the amount of pixels set in the distance variable.
If the user scrolls fast they might scroll a few more pixels though.
Demo on JSFiddle
(function iDirectionSpeed() {
var distance = 50; //pixels to scroll to determine speed
var preventLoop = true;
var currentScroll = scrollTop();
var currentDate = false;
function scroll() {
if(preventLoop) {
//Set date on scroll
if(!currentDate) {
currentDate = new Date();
}
//Get new scroll position
var newScroll = scrollTop();
var scrolledDistance = Math.abs(currentScroll - newScroll);
//User scrolled `distance` px or scrolled to the top/bottom
if(scrolledDistance >= distance || !newScroll || newScroll == scrollHeight()) {
//Stop scrolling
preventLoop = false;
freeze(newScroll);
//Get new date
var newDate = new Date();
//Calculate time
var time = newDate.getTime() - currentDate.getTime();
//Output speed
console.log("average speed: "+scrolledDistance+"px in "+time+"ms");
/*
To calculate the animation duration in ms:
x: time
y: scrolledDistance
z: distance you're going to animate
animation duration = z / y * x
*/
//Check direction
if(newScroll > currentScroll) {
console.log("scrolling down");
//scroll down animation here
} else {
console.log("scrolling up");
//scroll up animation here
}
/*
Time in milliseconds the scrolling is disabled,
in most cases this is equal to the time the animation takes
*/
setTimeout(function() {
//Update scroll position
currentScroll = newScroll;
//Unset date
currentDate = false;
//Enable scrolling
unfreeze();
/*
Wait 100ms before enabling the direction function again
(to prevent a loop from occuring).
*/
setTimeout(function() {
preventLoop = true;
}, 100);
}, 1000);
}
}
}
$(window).on("scroll", scroll);
})();
Implementation C:
Outputs scroll direction, distance and speeds to console, user is able to scroll the amount of pixels set in the distance variable.
If the user scrolls fast they might scroll a few more pixels though.
Demo on JSFiddle
(function iDirectionSpeedVelocity() {
var distance = 100; //pixels to scroll to determine speed
var preventLoop = true;
var currentScroll = [];
var currentDate = [];
function scroll() {
if(preventLoop) {
//Set date on scroll
currentDate.push(new Date());
//Set scrollTop on scroll
currentScroll.push(scrollTop());
var lastDate = currentDate[currentDate.length - 1];
var lastScroll = currentScroll[currentScroll.length - 1];
//User scrolled `distance` px or scrolled to the top/bottom
if(Math.abs(currentScroll[0] - lastScroll) >= distance || !lastScroll || lastScroll == scrollHeight()) {
//Stop scrolling
preventLoop = false;
freeze(currentScroll[currentScroll.length - 1]);
//Total time
console.log("Time: "+(lastDate.getTime() - currentDate[0].getTime())+"ms");
//Total distance
console.log("Distance: "+Math.abs(lastScroll - currentScroll[0])+"px");
/*
Calculate speeds between every registered scroll
(speed is described in milliseconds per pixel)
*/
var speeds = [];
for(var x = 0; x < currentScroll.length - 1; x++) {
var time = currentDate[x + 1].getTime() - currentDate[x].getTime();
var offset = Math.abs(currentScroll[x - 1] - currentScroll[x]);
if(offset) {
var speed = time / offset;
speeds.push(speed);
}
}
//Output array of registered speeds (milliseconds per pixel)
console.log("speeds (milliseconds per pixel):");
console.log(speeds);
/*
We can use the array of speeds to check if the speed is increasing
or decreasing between the first and last half as example
*/
var half = Math.round(speeds.length / 2);
var equal = half == speeds.length ? 0 : 1;
var firstHalfSpeed = 0;
for(var x = 0; x < half; x++ ) {
firstHalfSpeed += speeds[x];
}
firstHalfSpeed /= half;
var secondHalfSpeed = 0;
for(var x = half - equal; x < speeds.length; x++ ) {
secondHalfSpeed += speeds[x];
}
secondHalfSpeed /= half;
console.log("average first half speed: "+firstHalfSpeed+"ms per px");
console.log("average second half speed: "+secondHalfSpeed+"ms per px");
if(firstHalfSpeed < secondHalfSpeed) {
console.log("conclusion: speed is decreasing");
} else {
console.log("conclusion: speed is increasing");
}
//Check direction
if(lastScroll > currentScroll[0]) {
console.log("scrolling down");
//scroll down animation here
} else {
console.log("scrolling up");
//scroll up animation here
}
/*
Time in milliseconds the scrolling is disabled,
in most cases this is equal to the time the animation takes
*/
setTimeout(function() {
//Unset scroll positions
currentScroll = [];
//Unset dates
currentDate = [];
//Enable scrolling
unfreeze();
/*
Wait 100ms before enabling the direction function again
(to prevent a loop from occuring).
*/
setTimeout(function() {
preventLoop = true;
}, 100);
}, 2000);
}
}
}
$(window).on("scroll", scroll);
})();
Helper functions used in above implementations:
//Source: https://github.com/seahorsepip/jPopup
function freeze(top) {
if(window.innerWidth > document.documentElement.clientWidth) {
$("html").css("overflow-y", "scroll");
}
$("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
}
function unfreeze() {
$("html").css("position", "static");
$("html, body").scrollTop(-parseInt($("html").css("top")));
$("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
}
function scrollTop() {
return $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
}
function scrollHeight() {
return $("html")[0].scrollHeight ? $("html")[0].scrollHeight : $("body")[0].scrollHeight;
}
Just had a look at scrollify mentioned in the comments, it's 10kb and needs to hook at every simple event: touch, mouse scroll, keyboard buttons etc.
That doesn't seem very future proof, who know what possible user interaction can cause a scroll in the future?
The onscroll event on the other hand will always be triggered when the page scrolls, so let's just hook the animation code on that without worrying about any input device interaction.
As #seahorsepip states, it is not generally possible to know where a scroll will end up without adding custom behavior with JavaScript. The MDN docs do not list any way to access queued scroll events: https://developer.mozilla.org/en-US/docs/Web/Events/scroll
I found this information helpful:
Normalizing mousewheel speed across browsers
It highlights the difficulty of knowing where the page will go based on user input. My suggestion is to trigger a scroll to Y event when the code predicts the threshold is reached. In your example, if the scroll has moved the page 800 of 1000 pixels in a time window of 250ms, then set the scroll to that 1000 pixel mark and cut off the scroll for 500ms.
https://developer.mozilla.org/en-US/docs/Web/API/window/scrollTo
i'm not pretty sure if i've got what you're looking for. I've had project once, where i had to control the scrolling. Back then i've overwritten the default scroll event, after that you can set a custom distance for "one" scroll. Additionally added jQuery animations to scroll to a specific position.
Here you can take a look: http://c-k.co/zw1/
If that's what you're looking for you can contact me, and i'll see how much i still understand of my own thingy there
is easy to use event listener to do it. Here is a React example:
/**
* scroll promise
*/
const scrollPromiseCallback = useCallback((func:Function) => {
return new Promise((resolve, reject) => {
func(resolve, reject)
})
}, [])
/**
* scroll callback
*/
const scrollCallback = useCallback((scrollContainer, onScrollEnd, resolve) => {
/** 防抖时间 */
const debounceTime = 200
/** 防抖计时器 */
let timer = null
const listener = () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
scrollContainer.removeEventListener('scroll', listener)
resolve(true)
onScrollEnd?.()
}, debounceTime)
}
scrollContainer.addEventListener('scroll', listener)
}, [])
const scrollTo = useCallback((props:IUseScrollToProps) => {
return scrollPromiseCallback((resolve, reject) => {
const {
scrollContainer = window, top = 0, left = 0, behavior = 'auto',
} = props
scrollCallback(scrollContainer, props?.onScrollEnd, resolve)
scrollContainer.scrollTo({
top,
left,
behavior,
})
})
}, [scrollCallback, scrollPromiseCallback])
Goal:
Scroll the window smoothly with PageUp and PageDown keys.
1 press: page scrolls 1 unit.
n quick presses: page scrolls n units.
Let unit = 160px.
I press PageDown. Page starts scrolling to 160px, let's say it's 90px now, while I press PageDown again. It's obvious I don't want to STOP animation here, I want to change it's target frame to point to 320px! So it actually should speed up and NOT STOP until the page is scrolled to 320px.
It seemed obvious to me that all I have to do is changing tween object within step function given to .animate() method as argument.
I wired up second keydown to modify tween.end property, but it didn't work. Animation just stuttered and stopped. The movement always ends at first unit.
The x.stop().animate(...) approach is "no-no". More hickup - unacceptable. There must be a way to change animation end during the process without stopping it, slowing it down or any other unwanted artifacts.
Ok, here's the code:
var isScrolling = false;
var scrollStartPosition = 0;
var scrollTargetPosition = 0;
function goTo(position) {
if (isScrolling) {
scrollTargetPosition = position;
goToUpdate();
}
else {
scrollStartPosition = scrollTargetPosition = position;
position = position >= 0 ? (position <= pageEnd ? position : pageEnd) : 0;
$(page).animate({ scrollLeft : scroll = position }, { start: goToStart, step : goToStep, complete : goToComplete, duration : 500 });
}
}
function goToStart(arg) {
isScrolling = true;
}
function goToUpdate() {
// ???
}
function goToStep(n, tween) {
isScrolling = true;
if (scrollTargetPosition !== scrollStartPosition) {
scrollStartPosition = tween.end = scrollTargetPosition;
}
}
function goToComplete(arg) {
isScrolling = false;
}
Please, help :) I've wasted ca 8h experimenting with this with no luck. jQuery.animate() seems completely ignoring any atempt to change animation in progress, the only thing I succeeded to do is to stop and restart it. I also managed to queue subsequent moves, but the total movement was just FUGLY n jumps instead one normal move.
I've just described how to do it for free ;) It actually works as expected, I missed one very ugly bug in position parameter calculation. It just didn't change with pressing the keys.
Here's fixed goTo() function:
function goTo(position) {
if (isScrolling) {
scroll = scrollTargetPosition = position;
goToUpdate();
}
else {
scrollStartPosition = scrollTargetPosition = position;
position = position >= 0 ? (position <= pageEnd ? position : pageEnd) : 0;
$(page).animate({ scrollLeft : scroll = position }, { start: goToStart, step : goToStep, complete : goToComplete, duration : 500, queue : false });
}
}
The only difference is scroll variable (defined elsewhere) set to the new position after registering the event.
Now it works beautifully.
BTW, if we want use that kind of effect without breaking accessibility - it should be activated with some conditions met first. In my code the screen resoultion is checked. If it's over 1280px wide - I activate special animated view.
So, here's complete solution:
// create a very wide page
// include jQuery and this...
var page;
var pageEnd;
var scroll;
var scrollStep = 160;
var isScrolling = false;
var scrollStartPosition = 0;
var scrollTargetPosition = 0;
function goTo(position) {
if (isScrolling) {
scroll = scrollTargetPosition = position;
}
else {
scrollStartPosition = scrollTargetPosition = position;
position = position >= 0 ? (position <= pageEnd ? position : pageEnd) : 0;
$(page).animate({ scrollLeft : scroll = position }, { start: goToStart, step : goToStep, complete : goToComplete, duration : 500, queue : false });
}
}
function goToStart(arg) {
isScrolling = true;
}
function goToStep(n, tween) {
isScrolling = true;
if (scrollTargetPosition !== scrollStartPosition) {
scrollStartPosition = tween.end = scrollTargetPosition;
}
}
function goToComplete(arg) {
isScrolling = false;
}
function keyDown(e) {
var handled = true;
switch (e.which) {
case 33:
case 38:
goTo(scroll - scrollStep);
break;
case 34:
case 40:
goTo(scroll + scrollStep);
break;
case 35:
goTo(pageEnd);
break;
case 36:
goTo(0);
break;
default:
handled = false;
break;
}
if (handled) e.preventDefault();
}
function init() {
page = $('body');
pageEnd = page[0].scrollWidth - page[0].clientWidth;
page.scrollLeft(1);
if (page.scrollLeft() < 1) page = $('html');
goTo(0);
$('html').css({
'overflow-x' : 'scroll',
'overflow-y' : 'hidden'
});
scroll = page.scrollLeft();
$(window).keydown(keyDown);
}
$(init);
I am using ScrollTo plugin to create a simple paralax-style page-changing. Here is what happens when you scroll
var location = window.location.hash;
if(location == '') { var location = '#home' } // Default location
slides = ['#home', '#about', '#characters']; // All the slides in an array
// Calculating previous and next slides
var currentEl = slides.indexOf(location);
var prevEl = currentEl - 1;
var nextEl = currentEl + 1;
if(delta > 0)
{
if(location != '#home')
{
gofor(slides[prevEl]); // Scrolling up
}
}
else
{
if(location != '#characters')
{
gofor(slides[nextEl]); // Scrolling down
}
}
});
And here is the gofor function itself.
function gofor(slide)
{
$(slide).clearQueue().ScrollTo({duration: 700}); // Scrolling to the given slide
$('.nav>a').removeClass('active'); // Removing all active classes
$(slide + '_nav').addClass('active'); // Updating the menu class with the _nav suffix id
window.location.hash = slide; // Updating the location.hash with the new position
}
This is working okay but when you scroll your wheel more than one step it goes more than one page forward. How can i stop the scrolling function for a certain amount of time (like 3 seconds) and then let the mouse regain its scrolling function again?
Thanks.