2010-12-07 8 views
1

JavaScriptコードでウェブサイトをスクロールしたいときは、.scrollTopプロパティを設定するcorrent要素は何ですか?メインビューポートの正しいHTMLスクロール要素(+ jQuery)

それはwindow,document,document.bodyまたはhtmlですか?

jQueryには、メインビューポートをスクロールして呼び出しを統一する意図を検出するためのトリックがありますか?時には$(window).scroolTop(value)が動作すると思われますが、時にはそうではありません。

答えて

1

通常、<html>要素、別名document.documentElementです。しかし、Quirksモードを使用している場合は、代わりに<body>document.body)がビューポートを表します。 (HTML/CSSは明示的にこれを要求しているわけではありませんが、それは現代のブラウザの仕組みです)

クォークスモードになりたいとは思っていませんが、あなたはそれに対処する必要があります他の人のページ:

var viewport= document.compatMode==='BackCompat'? document.body : document.documentElement; 
// do something with viewport.scrollTop 

jQueryのwindow.scrollTo()の代わりに、直接スクロールプロパティの設定を使用しています。どちらの方法も実際にはほとんど同じです。 scrollToを使用すると、特定の要素によって表されるビューポートに頼るのを避けることができますが、jQueryはまだ 'other'プロパティの現在の値を読み取るのにまだscrollTop/scrollLeftを使用する必要があるため、大きな勝利。 pageXOffset/pageYOffsetを使用すると、特定の要素に依存することなく現在のスクロール位置を読み取ることができますが、どこでもサポートされているわけではありませんので、の場合はscrollTopメソッドにフォールバックする必要があります。

悲しいことに、これらのプロパティ/メソッドは過去に標準化されていません。 CSSOM Viewsがこれに最終的に対処します。

0

は私も前にこの問題を持っていた、そしてそれはブラウザの数がかなり異なる挙動をドキュメント/ウィンドウまたは除算

+0

私は「最も重要な」「もの」をスクロールしています。ユーザーがブラウザウィンドウのメインスクロールバーをドラッグしているかのように。ページには他のスクロール可能な要素はありません。 – tillda

+0

その場合、それはウィンドウです。使用する必要があります。なぜコードを投稿していないのですか? – Starx

+0

このhttp:// stackoverflowを参照してください。com/questions/832860/how-to-scroll-the-window-using-jquery-scrollto-function – Starx

0

、あなたがスクロールしているかに依存します。

function scrollToTop() { 
    $('body, html').scrollTop(0); 

    if ($.browser.webkit || $.browser.safari) { 
     // Hack for webkit browsers: hide and show canvas layer so window will scroll up. 
     // (scrollTop does not work right). 
     $('#canvas').hide(); 
     window.setTimeout(function() { 
      $('#canvas').show(); 
     }, 0); 
    } 
} 

しかし、私は簡単ですトップにスクロールする必要がありました。私は、このコードのかなり恐ろしい作品を使用して終了しました。あなたが特定のポイントにスクロールしたい場合、これをどうやって行うのかは分かりません。たぶんアンカーを使用していますか?

1

bobinceの回答にはライダーがいます。これは、Webkitブラウザが、癖や標準モードにかかわらず、documentElement.scrollTopをゼロに間違って設定していることです。したがって、彼の1ライナーに完全に頼ることはできません。

https://bugs.webkit.org/show_bug.cgi?id=9248

http://code.google.com/p/chromium/issues/detail?id=2891

それは見逃しないように十分な権限を持つ誰かがこのbobinceの回答にコメントすべきである、と私は、この投稿を削除することができます。

関連する問題