同じ古い問題、.scrolltop（0）Chrome＆Safariで動作していない

StackOverflow https://stackoverflow.com/questions/9316415

質問

最初に、私はグーグルで検索し、ここのように答えを見さえしました これ と これ, しかし、私はまだ私のケースのための実用的なソリューションを見つけていません。

ページをカバーするいくつかの固定要素を備えたページを設計し、HTML5/CSS3を作成してメインドキュメントにクリーンな「マスク」を作成するため、ボディスクロールバーが下にあるコンテンツをスクロールできるようにします。

FirefoxとIE（BLEH）では、Scrolltop（0）が完全に機能しています。ただし、質問が述べているように、私のお気に入りのブラウザではそれほどではありません。

私がメモしたことは、scrolltoイベントの前と後の両方で以下に電話することです 

$("body,html,document").each(function(){ console.log($(this).scrollTop()); });

結果は心地よくありませんでした。スクロールトップはすでに0であるため、スクロールトップを試みていないこと、または少なくともこれまでのところ「考えている」ことを示しています。

そして、あなたが尋ねる前に、私はこれらの3つのアイテムのそれぞれにそのコンソール呼び出しを行いました。ドキュメントスクロールトップはそれらのアイテムのいずれかでカバーする必要があります（私はボディを考えますが、つまり、あなたもHTMLに電話する必要があります）

アイデアに関するテイカーはいますか？

参考までに、それはCSSの奇妙さかもしれません（私は本当に理解できないChromeではなくIEでどのように機能するか）かもしれませんが、私はすでに以下を試しました ネガティブ 結果：

$(window).scrollTop(0);
$(document).scrollTop(0);
$("html").scrollTop(0);
$("body").scrollTop(0);
window.scroll(0,0);
$("body,html,document").scrollTop(0);
$("body,html").scrollTop(0);

どちらが私の質問を拡張していると思いますか、これはCSSの問題ですか？私は外部リンクを持っていないので、コードが長すぎます（CIビュー部分で作られています）。

  • ヘッダー、フッター、サイドバーを残してコンテンツを残してドキュメットスクロールバーでスクロールする
  • これまでに実装されたJavaScriptやjQueryはほとんどありませんでした。
  • 「コンテンツ」は、サイドバーナビゲーターでクリックされたリスト項目に基づいてjQueryの.load関数を使用する際にajax'dです

温度フィドルはもう上がっていません

役に立ちましたか？

解決

問題はCSSにあります。特に、以下に含めたルール。

html, body {
    overflow-x: hidden;
    overflow-y: auto;
}

これらのルールは明らかにスクロールバーに関連していますが、なぜあなたが観察している行動を引き起こしているのかわかりません。しかし、それらを削除すると、問題を解決する必要があります。

見る： http://jsfiddle.net/jnwum/23/.

他のヒント

同じ問題がありました。私が置いたら 

$(window).scrollTop(0);

ドキュメントレディハンドラーでは、機能しませんでした。しかし、Chrome Developer ToolkitのJavaScriptコンソールパネルでテストすると、うまくいきました！唯一の違いは、スクリプトの実行時間でした。だから私は試しました 

window.setTimeout(function() {
    $(window).scrollTop(0); 
}, 0);

そしてそれはうまくいきました。 0を超える遅延を設定することはネッカリーではありませんが、それも機能しました。それはjQueryのせいではありません。 

window.scrollTo(0, 0);  window.scroll(0, 0);

したがって、その理由は、ブラウザがWindow.pageyOffsetプロパティをレンダリングしてJSを実行した後にwindow.pageyoffsetプロパティに入力する可能性があります。

オーバーフロー設定が必要な人の場合、回避策はこのようなアニメーションを使用することです。

    $('#element_id').stop().animate({ scrollTop: 0 }, 500);

これはより良く振る舞うようです .scrollTop(0).

IE8とChromeで以下をテストし、両方とも機能しました。

$(window).scrollTop(0)

この答えもチェックしてください。 Androidで壊れたスクロールトップ - オーバーフローが見えるように設定され、相対的に位置する場合に最適に機能するようですが、ymmv。これらは便利だと思うかもしれません...

function repeatMeOnMouseDown() // for smooth scrolling
{
    var $newTop = $('#element_id').position().top + ($goingUp ? -20 : 20);
    $('#element_id').animate({top: $newTop}, 20, repeatMeOnMouseDown); 
}

// these should work
$('#element_id').animate({top: -200}, 200); // scroll down
$('#element_id').animate({top: 0}, 200); // scroll back up

// DON'T DO THIS - Offsets don't work with top like they do with scrollTop 
$('#element_id').animate({top: ("-= " + 200)}, 200);

// and when you get tired of fighting to do smooth animation 
// on different browsers (some buggy!), just use css and move on
function singleClick($goingUp)
{
   var $newTop = $('#element_id').position().top + ($goingUp ? -200 : 200);
    $('#element_id').css({top: $newTop}, 20); 
}

参考までに、上のボディではない場合、つまりiframeで、window.top.scrollto（0,0）を試してください。

スクロールするのと同じ問題がありました chrome. 。理由はそうでした height:100% スタイル body と html. この答えを参照してください

このコードはChromeでテストされました。 http://jsfiddle.net/wmo3o5m8/1/

(function () {
    var down = false, downX, downY;
    document.onmousedown = function (e) {
        downX = e.pageX;
        downY = e.pageY;
        down = true;
    };
    document.onmouseup = function () { down = false; };
    document.onmousemove = function (e) {
        if (down) {
            window.scrollTo(
                window.scrollX + downX - e.pageX,
                window.scrollY + downY - e.pageY
            );
        }
    };
})();

これは、CSSで宣言している場合の通常の動作です overflow: hidden 為に html また body あなたが読むことができるように、DOM要素 jQuery APIドキュメント:

垂直スクロール位置は、スクロール可能な領域の上のビューから隠されているピクセルの数と同じです。スクロールバーが最上部にある場合、または要素がスクロールできない場合、この数値は0になります。

と overflow: hidden スクロールバーはです 見えない したがって、要素はスクロールできないため、使用するすべての（私は疑問に思う）ブラウザごとに数値が0になります。

$('#element-id').prop('scrollTop', 0); また、トリックを行う必要があります。

私はこの問題をmacosに抱えていました。私は置こうとしました：

$(window).scrollTop(0);
document.body.scrollTop = document.documentElement.scrollTop = 0;

の中に $(window).load そして、それはまだ機能していませんでした。

それから私はいくつかのトリックを使用しようとしました：

$('body')
  .css('position', 'fixed')
  .delay(200)
  .promise()
  .done(function() {
    $('body').css('position', 'relative');
  });

そして、それはうまくいきました！位置は固定されています 分離 <body> から <html> ウィンドウスクロール位置を効果的にゼロに設定します。その後、200ミリ秒の遅延（より安全な側にいるためだけに）で、私は position: relative 戻る。

これが役立つことを願っています。ありがとう。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top