Instead of the normal mouse scroll speed, I'd like to make it slower and smoother and as consistent as it can in modern browsers.
I have already tried using a few plugins like NiceScroll (/).
But after installing it, for some reason it puts an overflow: hidden; on my content and can't scroll anywhere after. I don't need any custom-designed scrollbars. I just need the scrolling to be smoother when using the mouse scroll or vertical scroll bar like this:
/
Would anyone please enlighten me about this? I plan to use the skrollr plugin () along with the smooth scrolling.
Instead of the normal mouse scroll speed, I'd like to make it slower and smoother and as consistent as it can in modern browsers.
I have already tried using a few plugins like NiceScroll (https://nicescroll.areaaperta./).
But after installing it, for some reason it puts an overflow: hidden; on my content and can't scroll anywhere after. I don't need any custom-designed scrollbars. I just need the scrolling to be smoother when using the mouse scroll or vertical scroll bar like this:
http://pervolo./
Would anyone please enlighten me about this? I plan to use the skrollr plugin (https://github./Prinzhorn/skrollr) along with the smooth scrolling.
Share Improve this question edited Jan 1, 2018 at 11:38 AmmarCSE 30.6k6 gold badges48 silver badges53 bronze badges asked Nov 2, 2014 at 15:19 PauPau 5381 gold badge3 silver badges11 bronze badges3 Answers
Reset to default 5This may get you going:
$(window).on('mousewheel DOMMouseScroll', function(e) {
var dir,
amt = 100;
e.preventDefault();
if(e.type === 'mousewheel') {
dir = e.originalEvent.wheelDelta > 0 ? '-=' : '+=';
}
else {
dir = e.originalEvent.detail < 0 ? '-=' : '+=';
}
$('html, body').stop().animate({
scrollTop: dir + amt
},500, 'linear');
})
DOMMouseScroll and e.originalEvent.detail are required for Firefox. Change amt to be your desired scroll distance, and change 500 to be your desired scroll speed.
Fiddle: http://jsfiddle/utcsdyp1/1
I succeeded in making the scroll by mouse wheel look smooth as butter! Copy-paste the following snippet and try yourself.
let easeInOutQuint = t => t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; // Easing function found at https://gist.github./gre/1650294
// With this attempt I tried to make the scroll by mouse wheel look smooth
let delay = ms => new Promise(res => setTimeout(res, ms));
let dy = 0;
window.addEventListener("wheel", async e => {
// Prevent the default way to scroll the page
e.preventDefault();
dy += e.deltaY;
let _dy = dy; // Store the value of "dy"
await delay(150); // Wait for .15s
// If the value hasn't changed during the delay, then scroll to "start + dy"
if (_dy === dy) {
let start = window.scrollY || window.pageYOffset;
customScrollTo(start + dy, 600, easeInOutQuint);
dy = 0;
}
}, { passive: false });
function customScrollTo(to, duration, easingFunction) {
let start = window.scrollY || window.pageYOffset;
let time = Date.now();
let timeElapsed = 0;
let speed = (to - start) / duration;
(function move() {
if (timeElapsed > duration) {
return;
}
timeElapsed = Date.now() - time;
// Get the displacement of "y"
let dy = speed * timeElapsed;
let y = start + dy;
// Map "y" into a range from 0 to 1
let _y = (y - start) / (to - start);
// Fit "_y" into a curve given by "easingFunction"
_y = easingFunction(_y);
// Expand "_y" into the original range
y = start + (to - start) * _y;
window.scrollTo(0, y);
window.requestAnimationFrame(move);
})();
}
You can catch an action when user scrolls using $(element).on( "scroll", handler ), then, using, for example this code
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
scroll to some element using jQuery