平滑滾動跨瀏覽器

我試圖不通過編寫我自己的scolling腳本來重新發明輪子，但是我發現使用jQuery的一切（我不想用我的代碼弄亂它），沒有工作，沒有支持滾動鍵或div滾動......沒有什麼是足夠好的。平滑滾動跨瀏覽器

我在Windows 7上運行：Opera和Chrome不滾動平滑，因此我編寫了可以提供平滑滾動體驗的代碼。然而，在默認情況下平滑滾動的資源管理器11中，我的腳本使其過敏。我在Mac OS上運行Chrome的朋友告訴我，滾動也很流暢。

我想我的問題可以通過需要JavaScript滾動增強（我無法訪問所有內容）的瀏覽器x OS列表來回答，也可以通過改進我的代碼來避免不需要增強的瀏覽器下的醜陋行爲。

所需的功能後

沒有jQuery的
平穩向上/向下鍵滾動
滾動的div，不僅主窗口
沒有的jQuery（這是對我很重要，所以我提到它兩次）
否MooTools，沒有框架，只有原生JS（可以使用現代化的工具或其他精益工具）

任何有關代碼建議表示讚賞，太（我知道我應該使用requestAnimationFrame，很快）

對於目前來說，我的代碼是

// easeOutQuad by Robert Penner 
Math.easeOut = function (t, b, c, d) { t /= d; return -c * t*(t-2) + b; }; 

(function() { // do not mess global space 
var 
    interval, // scroll is being eased 
    mult = 0, // how fast do we scroll 
    dir = 0, // 1 = scroll down, -1 = scroll up 
    steps = 50, // how many steps in animation 
    length = 30, // how long to animate 
    keyDelta = 0; 
function KeyWheelHandler(e) { 
    if(e.which!=38 && e.which!=40) return; 
    keyDelta = e.which==38 ? -1 : 1; 
    mult = 4; 
    MouseWheelHandler(e); 
} 
function MouseWheelHandler(e) { 
    e.preventDefault(); // prevent default browser scroll 
    clearInterval(interval); // cancel previous animation 
    ++mult; // we are going to scroll faster 
    var delta = keyDelta || -Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 
    if(dir!=delta) { // scroll direction changed 
    if(!keyDelta) mult = 1; // start slowly 
    dir = delta; 
    } 
    // get the closest scrollable parent 
    for(var tgt=e.target; tgt!=document.documentElement; tgt=tgt.parentNode) { 
    var oldScroll = tgt.scrollTop; 
    tgt.scrollTop+= delta; 
    if(oldScroll!=tgt.scrollTop) break; 
    } 
    var start = tgt.scrollTop; 
    var end = start + length*mult*delta; // where to end the scroll 
    var change = end - start; // base change in one step 
    var step = 2; // current step, not less than 2, see the (t-2) in EaseOut 
    interval = setInterval(function() { 
    var pos = Math.easeOut(step++,start,change,steps); 
    tgt.scrollTop = pos; 
    if(step>=steps) { // scroll finished without speed up - stop 
     mult = keyDelta = 0; 
     clearInterval(interval); 
    } 
    },15); 
} 
if(window.chrome) { // Opera and Chrome 
    window.addEventListener("mousewheel", MouseWheelHandler); 
    //window.addEventListener("DOMMouseScroll", MouseWheelHandler); // FF 
    document.documentElement.addEventListener("keydown", KeyWheelHandler); 
} 
})();

來源

2015-12-07 Jan Turoň

我會使用'wheel'事件作爲默認值，它是現代的跨瀏覽器版本。看起來你沒有按順序將事件傳遞給監聽器，所以使用它的那部分函數將不起作用。 – Shikkediel

未通過該活動？你能否提一下究竟在哪裏？ –

''window.addEventListener（「mousewheel」，MouseWheelHandler）;' – Shikkediel

在未來的樣子（截至2015）css smooth-scroll將解決這個問題：

滾動框是使用在一段時間用戶代理定義的週期一個用戶代理定義的定時功能以平穩的方式滾動。如果有的話，用戶代理應該遵循平臺傳送。

用戶代理可能會忽略此屬性。（???）

約忽略。可能是因爲該說明爲什麼瀏覽器mostly ignore this，而Chrome work's on it，所以我希望歌劇以後實現這一點。

IE，FF和Safari在最新版本似乎默認情況下都能順利滾動，所以這個問題可以通過等待來解決。

來源

2015-12-12 15:28:08

平滑滾動跨瀏覽器

回答

相關問題