jQuery div自动滚动在GAS中不起作用
jQuery div自动滚动在GAS中不起作用
提问于 2017-05-04 23:35:08
在使用Google Apps脚本发布的web应用程序中，div自动滚动不起作用。你能帮我把它修好吗？谢谢。
以下是web应用程序的链接：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>回答 1
Stack Overflow用户
发布于 2017-05-05 15:17:26
它工作了，有两个部分的问题，为什么它不能自动滚动div重复。第一个jQuery代码没有被捕获，Bootstrap不会检测到它给出的错误消息:未捕获错误:Bootstrap的JavaScript需要jQuery，根据布莱恩的建议发布了一个新版本后解决了这个问题，并在这里查看了解决方案：Bootstrap won't detect jQuery 1.11.0 - Uncaught Error: Bootstrap's JavaScript requires jQuery
问题的第二部分是它有错误的CSS代码，前面的CSS代码是：
.col1 { height:180px；overflow-y:滚动；背景:黄色；}
.col2 { height:180px；overflow-y:滚动；背景：#6BC0FF；}
.col3 { height:180px；overflow-y:滚动；背景:橙色；}
.col4 { height:180px；overflow-y:滚动；背景:绿色；}
新修订的CSS代码：
.item1 { height:180px；overflow-y:滚动；背景:黄色；}
.col2 { height:180px；overflow-y:滚动；背景：#6BC0FF；}
.col3 { height:180px；overflow-y:滚动；背景:橙色；}
.col4 { height:180px；overflow-y:滚动；背景:绿色；}
修改后的HTML文件代码如下：
<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.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>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>
<div id="item2">
<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 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);
console.log($(".col1").height());
console.log($(".item1").height());
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43787257
复制相关文章
相似问题
腾讯云开发者
