0

助けが必要です。このサンプルでスクロールトップが機能しないのはなぜですか ?コードを使用すると、すべてが正常に機能します。しかし、スクロールトップのcssを更新すると機能しません.:(これを修正するにはどうすればよいですか?これは私のcssスタイルが原因ですか?私はこれを使用しましたが、divの下部でスクロールしません..

$(document).ready(function() {
    alert('scroll must happen');
    $('#message_container').scrollTop($('#message_container')[0].scrollHeight);
    $('.topbox').html('just sample');
});
4

2 に答える 2

0

スクロールしようとしている要素がオーバーフローしていないため、目に見えるスクロールは発生していません。すべて表示されています。スクロールバーは<body>要素用であり、<div>スクロールしようとしているものではありません。

#message_containerたとえば高さを指定すると、機能させることができます

#message_container {height:100px;}

または、このデモのように、絶対配置のトリックを使用します。(最初の「元に戻す」CSS は、コードを短く保つために使用しました。MDN を参照してください)

#container, #head, #body, #foot{
    position: absolute;
    top:0;left:0;right:0;bottom:0;
}
#head {
    bottom: initial;
    height:50px;
}
/* position so it get's your desired size*/
#body {
    top:50px;
    bottom:50px;
    overflow-y: scroll;
}
#foot {
    top: initial;
    height:50px;
}
于 2013-10-19T21:58:38.437 に答える
0

2 つのことを設定する必要があります。

  1. divのオーバーフロー、
  2. ある程度の高さ、さらにはパーセンテージ 1 (より柔軟にするため)。

高さをまったく設定しないと、div が展開され、スクロールするものは何もありません。この場合、表示される唯一のスクロール バーはドキュメント自体 (本文) のものです。

高さとオーバーフロー プロパティを CSS に追加したところ、期待どおりに機能するようになりました。

jsフィドル

追加された CSS:

#message_container {
 overflow-y:auto;
 overflow-x:hidden;
 height:300px;
}
于 2013-10-19T22:52:08.560 に答える