獲得平滑和稍微延遲的滾動

Question

如何通過鼠標滾輪獲得一個很好且平滑的滾動條？我沒有興趣點擊一個鏈接，頁面向下滾動，它應該與鼠標滾輪。

一個例子是阿迪達斯微型：http://www.adidas.dk/climazone

JavaScript是罰款，如果是解決

Answer 1

您可以使用jQuery的鼠標滾輪插件，U可以得到最新的版本在這裏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'); 
} 
} 

Answer 2

在純光JS：
您需要position:fixed容器和由JavaScript definied其父的高度。然後用一個調用requestAnimationFrame的js腳本，將JS的Math.round()中的容器屬性transform:translate3d(x,x,x)更改爲延遲翻譯。

這是我的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);