CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
Sakir Inteser
Sakir Inteser

Reputation: 71

How to control the scrolling speed of a website?

I want to control my scrolling speed like this website http://www.powerwashingcharlotte.com/ when you scroll fast it covers a lot distance and when you scroll slow it covers less distance. I tried to achieve this accroding to this fiddle: http://jsfiddle.net/36dp03ur/

    if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function wheel(event) {
    var delta = 0;
    if (event.wheelDelta) delta = event.wheelDelta / 120;
    else if (event.detail) delta = -event.detail / 3;

    handle(delta);
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

function handle(delta) {
    var time = 1000;
    var distance = 300;

    $('html, body').stop().animate({
        scrollTop: $(window).scrollTop() - (distance * delta)
    }, time );
}

but this isn't providing the same effect as the website link I've provided. Any kind of help is appreciated. Thank you.

edit: it's been 8 hours since I've posted this question, but still haven't got an answer. Thought of bumping it.

Upvotes: 2

Views: 1757

Answers (1)

nikhil reddy
nikhil reddy

Reputation: 11

window.addEventListener('wheel', DoSomething);

window.addEventListener('mousewheel', DoSomething);

window.addEventListener('DOMMouseScroll', DoSomething);

Try one of these, it's browser specific.

Upvotes: 1

Related Questions