fiddle を作成しました。これは、divを自動的に上下にスクロールします。これは正常に機能しています。ただし、下にスクロールすると問題が発生し、最後の行(この場合は「String4」)が表示されません。誰かが私がこれを整理するのを手伝ってくれませんか。
<div class="container">
<div class="content">
<p>string1</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string0</p>
<p>string1</p>
<p>string2</p>
<p>string3</p>
<p>string4</p>
<p> </p>
</div>
とjsのもの:
$(document).ready(function() {
if ($('.content').height() > $('.container').height()) {
setInterval(function () {
start();
}, 3000);
}
});
function animateContent(direction) {
var animationOffset = $('.container').height() - $('.content').height();
if (direction == 'up') {
animationOffset = 0;
}
console.log("animationOffset:"+animationOffset);
$('.content').animate({ "marginTop": (animationOffset)+ "px" }, 5000);
}
function up(){
animateContent("up")
}
function down(){
animateContent("down")
}
function start(){
setTimeout(function () {
down();
}, 2000);
setTimeout(function () {
up();
}, 2000);
setTimeout(function () {
console.log("wait...");
}, 5000);
}
ここに良い解決策があります
ここだけをチェックしてください
$(document).ready(function() {
if ($('.content').height() > $('.container').height()) {
setInterval(function () {
start();
}, 3000);
}
});
function animateContent(direction) {
var animationOffset = $('.container').height() - $('.content').height()-30;
if (direction == 'up') {
animationOffset = 0;
}
console.log("animationOffset:"+animationOffset);
$('.content').animate({ "marginTop": (animationOffset)+ "px" }, 5000);
}
function up(){
animateContent("up")
}
function down(){
animateContent("down")
}
function start(){
setTimeout(function () {
down();
}, 2000);
setTimeout(function () {
up();
}, 2000);
setTimeout(function () {
console.log("wait...");
}, 5000);
}
.container { height:250px; background:red; padding:0 10px; overflow:hidden; }
.content { background:#eee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="content">
<p>string1</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string0</p>
<p>string1</p>
<p>string2</p>
<p>string3</p>
<p>string4</p>
</div>
</div>
make
var animationOffset = $('.container').height() - $('.content').height()-30;
パディングがあなたの身長を妨げるかもしれないように。
空のpタグを削除しました。
ここに フィドル
これを試してください:愚かかもしれませんが、仕事をします:
<div class="container">
<div class="content">
<p>string1</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string0</p>
<p>string1</p>
<p>string2</p>
<p>string3</p>
<p>string4</p>
<p><br> </p>
</div>
</div>
更新されたフィドルは次のとおりです。 http://jsfiddle.net/f7e3d440/9/
次のコードを入力してみてください。
var myDiv = document.getElementById('content');
myDiv.scrollTop = myDiv.scrollHeight;
Div Overflow Scroll-to-bottom:可能ですか?
http://www.codeproject.com/Questions/632251/How-to-make-div-scroll-to-bottom-on-load