2016-09-25 4 views
0

ChromeとSafariではうまく動作するスムーズスクロール機能を持​​っていますが、Firefoxではdocument.body.scrollTopを呼び出しているため、ボールが再生されません。JavaScriptはスムーズにブラウザ間でスクロールする

function smoothScroll(body, destination, duration) { 
    duration = (typeof duration != "undefined") 
    ? duration 
    : 500; 
    if (duration <= 0) return; 
    var difference = destination - body.scrollTop; 
    var perTick = difference/duration * 10; 
    setTimeout(function() { 
    body.scrollTop = body.scrollTop + perTick; 
    if (body.scrollTop === destination) { 
     showAndHideNav("hide"); 
     return; 
    } 
    smoothScroll(body, destination, duration - 10); 
    }, 10); 
} 

function findDestination(element) { 
    var value = element.getAttribute("value"), 
    destination = document.getElementById(value).offsetTop; 
    return destination; 
} 

smoothScroll(document.body, findDestination(element)); 

私は右の場所を特定するが、それらの場所にスクロールしない、pageYOffsetscrollTopを交換してみました。

scrollTopのブラウザフレンドリーな方法をお勧めしますが、ブラウザ間でのスムーズなスクロールが可能ですか?

ありがとうございました!

+0

は 'ウィンドウを試してみてください.scrollTop'。 [SO](http://stackoverflow.com/a/17776759/1086525) – Whothehellisthat

答えて

3

代わりの直接body.scrollTopを使用して、以下のヘルパー関数を試し、そのように使用:getScrollTop(window)

function getScrollTop(scrollable) { 
    return scrollable.scrollTop || document.body.scrollTop || document.documentElement.scrollTop; 
} 

を実際にターゲットにスクロールするには、このクロスブラウザの方法で試してみてください。

window.scrollTo(0, getScrollTop(window) + perTick); 
+0

document.documentElement.scrollTop; firefoxのために働く、jedifansメソッドは動作するはずです。 –

+0

@jedifansこれは完全に(そして非常に簡潔に)動作します。本当にありがとう! – dedaumiersmith

関連する問題