javascript - 获得平滑且有点延迟的滚动

Question

如何使用鼠标滚轮获得漂亮流畅的滚动效果？我对单击链接和页面自行向下滚动不感兴趣，应该使用鼠标滚轮。

adidas 微型网站就是一个例子: http://www.adidas.dk/climazone

如果这是解决方案，Javascript 没问题

Answer 1

您可以使用 jQuery 鼠标滚轮插件，您可以在这里获得最新版本 https://github.com/jquery/jquery-mousewheel

然后在你的js文件中你可以做这样的事情:

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

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

您需要根据您的网站结构定义 nextSlide() 和 prevSlide() 以显示出现在鼠标滚轮上的不同部分。

我在自己的网站上使用了这个方法，也许它可以帮助你:

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');
 }
}