【发布时间】：2017-05-04 15:35:07
【问题描述】：
在 [使用 Google Apps 脚本发布] 的网络应用程序中，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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h2>My First Bootstrap Page</h2>
<p>Resize this responsive page to see the effect!</p>
</div>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col1">
<h3>Column 1</h3>
<div class="item1" id="item1">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit... see if it goes beyond the margin</span>
<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 col2">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-3 col3">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-3 col4">
<h3>Column 3</h3>
<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>
<script>
$("#item1").animate({
scrollTop: $("#item1").height()
}, 4000);
setTimeout(function() {
$("#item1").animate({
scrollTop: 0
}, 4000);
}, 4000);
setInterval(function() {
// 4000 - it will take 4 secound in total from the top of the page to the bottom
$("#item1").animate({
scrollTop: $("#item1").height()
}, 4000);
setTimeout(function() {
$("#item1").animate({
scrollTop: 0
}, 4000);
}, 4000);
}, 8000);
</script>
</body>
</html>
【问题讨论】：
-
在没有任何细节的情况下说某事“不工作”并不是提出问题的好方法。是否缺少滚动条？如果它工作正常，用户会看到什么？您是否尝试过调试问题？你熟悉浏览器控制台吗？在 chrome 和 firefox 中，按 f12 键打开开发者工具。添加一些
console.log()语句以查看代码在做什么。 -
jQuery 不会自动滚动它选择的 div，它应该重复自动滚动。第一个盒子[即'第 1 列'] 在页面上。
-
您链接的渲染页面中没有 jQuery。保存 GAS 代码后，您需要转到 Publish > Deploy as Web App 并查看开发代码或发布新版本。
-
代码部署为Web App，html文件head部分包含jQuery：
-
我的意思是你的自定义脚本。 jQuery 库在那里，但您的滚动脚本不在页面上呈现的 HTML 中。
标签： jquery google-apps-script autoscroll