获得平滑且有点延迟的滚动答案

【问题标题】：Get a smooth and a bit delayed scroll获得平滑且有点延迟的滚动
【发布时间】：2017-04-11 07:10:51
【问题描述】：

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

一个例子是阿迪达斯微型网站：http://www.adidas.dk/climazone

如果这是解决方案，Javascript 很好

【问题讨论】：

stackoverflow.com/questions/20542586/…

标签： javascript html css scroll

【解决方案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');
 }
}

【讨论】：

【解决方案2】：

在纯粹和轻量级的 JS 中：
您需要一个带有position:fixed 的容器，其父高度由javascript 定义。然后使用调用 requestAnimationFrame 的 js 脚本，在 JS 中将容器属性 transform:translate3d(x,x,x) 更改为 Math.round() 以延迟翻译。

这是我使用该方法制作的 JSFiddle，可以帮助您：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);

【讨论】：