CODEWITHSUNDEEP
javascripthtmlcssscroll
Adrian Kirkegaard
Adrian Kirkegaard

Reputation: 65

Get a smooth and a bit delayed scroll

How do I get a nice and smooth scroll with mousewheel? Im not interrested in clicking on a link and the page scrolls down itself, It should be with the mousewheel.

An example is the adidas microsite: http://www.adidas.dk/climazone

Javascript is fine if that is the solution

Upvotes: 0

Views: 2749

Answers (2)

Alex - DJDB
Alex - DJDB

Reputation: 740

In pure and light JS :
You need a container with position:fixed and its parent height definied by javascript. Then with a js script that call a requestAnimationFrame, you change container property transform:translate3d(x,x,x) with Math.round() in JS in order to delay translation.

This is a JSFiddle I made with that method and that can help you : https://jsfiddle.net/nesquimo/0cwutgyx/3/

var container = document.getElementById('YOUR CONTAINER');
var bodyScrollLevel = 0, newY, destY, currentY, windowScrollTop;
smoothScrollMove = function () {
    requestAnimationFrame(smoothScrollMove);
    windowScrollTop = window.pageYOffset;
    destY = windowScrollTop;
    currentY = -bodyScrollLevel;
    if (Math.round(currentY) != Math.round(destY)) {
       newY = Math.round(currentY + ((destY - currentY) * 0.08));
       bodyScrollLevel = -newY;
       container.style.transform = "translate3d(0,-" + newY + "px, 0)";
    }
}
requestAnimationFrame(smoothScrollMove);

Upvotes: 1

Emad Dehnavi
Emad Dehnavi

Reputation: 3441

You can use jQuery Mouse Wheel Plugin, u can get the latest version here https://github.com/jquery/jquery-mousewheel

then in your js file you can do something like this : 

$('body').on('mousewheel', debouncer(function (event, deltaY, deltaX) {

    if (deltaY < 1) {
        nextSlide();
    }
    else {
        prevSlide();
    }
}));

you need to define nextSlide() & prevSlide() based on your website structure to display the different sections on mousewheel occurred.

I used this methods for my own website, maybe it can help you : 

function nextSlide() {
if ($('.starter-template.active').hasClass('prevlast')||$('.starter-template.active').hasClass('last')) {
    $('.footer').fadeOut();
} else {
    $('.footer').fadeIn();
}

if ($('.starter-template.active').hasClass('last')) {
    return false
}
else {
    $('.starter-template.active').removeClass('active').addClass('up').fadeOut().next('.starter-template').fadeIn().addClass('active');
}
}
function prevSlide() {
if ($('.starter-template.active').hasClass('last')) {
    $('.footer').fadeIn();
}
if ($('.starter-template.active').hasClass('first')) {
    return false
}
else {
    $('.starter-template.active').removeClass('active').removeClass('up').prev('.starter-template').fadeIn().addClass('active');
 }
}

Upvotes: 1

Related Questions