我的代码应该从上到下重复滚动div到顶部，但是自动滚动不会一直向下滚动，它会在下面留下几个项目。
问题： 1）如何让它一直向下滚动 2）如何根据div中的项目数设置滚动持续时间，以避免滚动太快或太慢。因此它会以正常速度滚动，具体取决于div项目的数量。
以下是完整代码，此处是指向我的应用的链接：https://script.google.com/macros/s/AKfycby4jMUrDqW8HLev0HkWt36XCdtpjuSXsv2-yThkXSzA5fusfXw/exec
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h2>Machine Status</h2>
</div>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col1">
<h1 id="readyLine">Ready Line, <?= getCountReadyLine() ?> items</h1>
<div class="item1" id="item1">
<? var options = getReadyLine()
for (var i = 0; i < options.length; i++) { ?>
<p><?= options[i] ?></p>
<? } ?>
</div>
</div>
<div class="col-sm-3 col2">
<h1 id="priorityLine">Priority Line</h1>
<div class="item2" id="item2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-3 col3">
<h1>Column 3</h1>
<div class="item3" id="item3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-3 col4">
<h1>Column 4</h1>
<div class="item4" id="item4">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function () {
var outerHeight1 = 0;
$("#item1").children().each(function() {
outerHeight1 += $(this).outerHeight();
});
var outerHeight2 = 0;
$("#item2").children().each(function() {
outerHeight2 += $(this).outerHeight();
})
$("#item1").animate({
scrollTop: outerHeight1
}, 30000);
setTimeout(function() {
$("#item1").animate({
scrollTop: 0
}, 50000);
}, 3000);
setInterval(function() {
// 4000 - it will take 4 secound in total from the top of the page to the bottom
$("#item1").animate({
scrollTop: outerHeight1
}, 30000);
setTimeout(function() {
$("#item1").animate({
scrollTop: 0
}, 30000);
}, 4000);
}, 4000);
$("#item2").animate({
scrollTop: outerHeight2
}, 8000);
setTimeout(function() {
$("#item2").animate({
scrollTop: 0
}, 8000);
}, 8000);
setInterval(function() {
// 4000 - it will take 4 secound in total from the top of the page to the bottom
$("#item2").animate({
scrollTop: outerHeight2
}, 8000);
setTimeout(function() {
$("#item2").animate({
scrollTop: 0
}, 8000);
}, 8000);
}, 8000);
var outerHeight = 0;
var totalHeight = $("#item1").children().each(function() {
outerHeight += $(this).outerHeight();
});
console.log($(".col1").width());
console.log($("#item1").width());
});
</script>
</body>
</html>
这是将数据返回到div文件的HTML文件的代码。
function doGet() {
var html = HtmlService.createTemplateFromFile('html').evaluate()
.setTitle('Ch4 Contact Me')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
var ss = SpreadsheetApp.openById("spreadsheet-id");
var sheetMAT = ss.getSheetByName("Sheet3");
var data = sheetMAT.getRange(3, 2, sheetMAT.getLastRow() - 1, 4).getValues();
var temp1 = [];
var temp2 = '';
var dataReadyLine = [];
function getReadyLine() {
var rawData = sheetMAT.getRange(3, 2, sheetMAT.getLastRow() - 2, 4).getValues();
for (var i=0; i<rawData.length; i++) {
if (rawData[i][3] === "A Ready Line") {
temp2 = ' ' + data[i][0];
temp1.push(data[i][1], temp2);
dataReadyLine.push(temp1);
temp1 = [];
temp2 = '';
}
}
return dataReadyLine;
}
function getCountReadyLine() {
var rawData = sheetMAT.getRange(3, 2, sheetMAT.getLastRow() - 2, 4).getValues();
var count = 0;
for (var i=0; i<rawData.length; i++) {
if (rawData[i][3] === "A Ready Line") {
count += 1;
}
}
return count;
}